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

记得之前我们分享过一款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);

            });



        });

via：http://www.w2bc.com/Article/17889