form1.cn
Make a little progress every day

jQuery手机触屏滑动图片轮播效果代码

29th of October 2017 Javascript Jquery 2612

使用方法
引用js插件和css样式表

<link type="text/css" href="css/style.css" rel="stylesheet"/>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.event.drag.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>


HTML结构很简单

<div class="img_gallery">
    <div class="point">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
    </div>
    <div class="main_img">
        <ul>
            <li><span class="img_1"></span></li>
            <li><span class="img_2"></span></li>
            <li><span class="img_3"></span></li>
            <li><span class="img_4"></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 class="img_font">
        <span>img 1</span>
        <span>img 2</span>
        <span>img 3</span>
        <span>img 4</span>
        <span>img 5</span>
    </div>
</div>


js调用实现触屏滑动图片切换

$(".img_gallery").hover(function(){
$("#btn_prev,#btn_next").fadeIn()
},function(){
$("#btn_prev,#btn_next").fadeOut()
});
$dragBln = false;
$(".main_img").touchSlider({
flexible : true,
speed : 200,
btn_prev : $("#btn_prev"),
btn_next : $("#btn_next"),
paging : $(".point a"),
counter : function (e){
$(".point a").removeClass("on").eq(e.current-1).addClass("on");//图片顺序点切换
$(".img_font span").hide().eq(e.current-1).show();//图片文字切换
}
});
$(".main_img").bind("mousedown", function() {
$dragBln = false;
});
$(".main_img").bind("dragstart", function() {
$dragBln = true;
});
$(".main_img a").click(function(){
if($dragBln) {
return false;
}
});
timer = setInterval(function(){
$("#btn_next").click();
}, 5000);
$(".img_gallery").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
$("#btn_next").click();
},5000);
});
$(".main_img").bind("touchstart",function(){
clearInterval(timer);
}).bind("touchend", function(){
timer = setInterval(function(){
$("#btn_next").click();
}, 5000);
});


下载该源码