首页 > 特效插件 > 滚动轮播 >  支持拖动的jQuery图片轮播效果正文

支持拖动的jQuery图片轮播效果

特效介绍
jQuery图片滚动插件
jQuery图片滚动插件

漂亮的jQuery图片轮播效果，支持拖动图片滚动，而且自适应屏幕的大小。以上两点就注定该效果非常适合放到手机网站上。但是，本特效如果作为pc端网站的滚动，不太适合，因为它不兼容IE8浏览器。所以，使用时请慎重。当然这不影响它作为一款优秀的手机端网页图片滚动插件。
使用方法
1、引入下面的css和js代码 
<link type="text/css" href="style/style.css" rel="stylesheet"/>
<script type="text/javascript" src="https://5.jimth.com/download/jquery/jquery-1.8.3.min.js"></script>
<!--jquery.event.drag-1.5.min.js是鼠标拖动插件，如果不需要，可以删除-->
<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
<script type="text/javascript">
$(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);
    });
    
});
</script>
2、在body放入下面的html代码： 
<div class="main_visual">
    <div class="flicking_con">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
    </div>
    <div class="main_image">
        <ul>
            <li><span class="img_3"></span></li>
            <li><span class="img_4"></span></li>
            <li><span class="img_1"></span></li>
            <li><span class="img_2"></span></li>
            <li><span class="img_5"></span></li>
        </ul>
        <a href="javascript:;" id="btn_prev"></a>
        <a href="javascript:;" id="btn_next"></a>
    </div>
</div>
注：图片地址在css文件里面，为了方便调用，您可以将图片放到“<li><span class="img_3"></span></li>”里面也可以。
TAGS: jquery图片轮播