A jQuery-based focus chart that supports mouse drag and drop, and jquery drag and drop

A jQuery-based focus chart that supports mouse drag and drop, and jquery drag and drop

I remember sharing a jQuery full-screen ad image focus image. The image switching effect is good. Today, we will share another jQuery focus chart plug-in, which features the support for mouse drag and drop sliding, so it is more convenient to use on mobile devices. You just need to slide the screen with your fingers to switch between images.

Download Online Preview source code

Implementation code.

Html code:

 <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>                    </li>                <li>                    </li>                <li>                    </li>                <li>                    </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 Code:

 $(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