一款基于jQuery的支持鼠标拖拽滑动焦点图

浏览数：46 / 时间：2015年06月09日

记得之前我们分享过一款jQuery全屏广告图片焦点图，图片切换效果还不错。今天我们要分享另外一款jQuery焦点图插件，它的特点是支持鼠标拖拽滑动，所以在移动设备上使用更加方便，你只要用手指滑动屏幕即可切换图片。

技术分享

实现的代码。

html代码：

 <div class="main_visual">
        <div class="flicking_con">
            <a class="on" href="#@">1</a> <a href="#@">2</a> <a href="#@">3</a> <a href="#@">4</a>
        </div>
        <div class="main_image">
            <ul>
                <li>
                    <img src="images/20141206093912_0947.jpg"></li>
                <li>
                    <img src="images/20141206093851_5791.jpg"></li>
                <li>
                    <img src="images/20141206092732_4208.jpg"></li>
                <li>
                    <img src="images/20141206093851_5791.jpg"></li>
            </ul>
        </div>
        <script>
            $(".main_image img").each(function () {
                var ww = $(".main_image").width();
                var w = $(this).width();
                var ml = Math.round((parseInt(ww) - parseInt(w)) / 2);
                $(this).css({ marginLeft: ml + "px" })
            })
        </script>
    </div>

js代码：

 $(document).ready(function () {

            $(".main_visual").hover(function () {
                $("#btn_prev,#btn_next").fadeIn()
            }, function () {
                $("#btn_prev,#btn_next").fadeOut()
            });

            $dragBln = false;

            $(".main_image").touchSlider({
                flexible: true,
                speed: 200,
                btn_prev: $("#btn_prev"),
                btn_next: $("#btn_next"),
                paging: $(".flicking_con a"),
                counter: function (e) {
                    $(".flicking_con a").removeClass("on").eq(e.current - 1).addClass("on");
                }
            });

            $(".main_image").bind("mousedown", function () {
                $dragBln = false;
            });

            $(".main_image").bind("dragstart", function () {
                $dragBln = true;
            });

            $(".main_image a").click(function () {
                if ($dragBln) {
                    return false;
                }
            });

            timer = setInterval(function () {
                $("#btn_next").click();
            }, 5000);

            $(".main_visual").hover(function () {
                clearInterval(timer);
            }, function () {
                timer = setInterval(function () {
                    $("#btn_next").click();
                }, 5000);
            });

            $(".main_image").bind("touchstart", function () {
                clearInterval(timer);
            }).bind("touchend", function () {
                timer = setInterval(function () {
                    $("#btn_next").click();
                }, 5000);
            });

        });