touchSwipe实例：手机端手指滑动banner翻页效果，带自动循环功能

//本例耦合度太高，不是一个好的js插件，适合懂js的初学者获取思路用，不适合直接套用。

touchSwipe实例：手指滑动banner翻页效果，带自动循环功能

html代码

<div class=”banner”>
<img class=”bannerimg” src=”images/banner1.jpg”>
<img class=”bannerimg” src=” images/banner2.jpg “>
<img class=”bannerimg” src=” images/banner3.jpg “>
<img class=”bannerimg” src=” images/banner4.jpg “>
<img class=”bannerimg” src=” images/banner5.jpg “>
<ul class=”bannerradio”>
<li class=”cover”><em></em></li>
<li><em></em></li>
<li><em></em></li>
<li><em></em></li>
<li><em></em></li>
</ul>
</div>

引入文件//本例只提供代码，具体文件自己下载

<script type=”text/javascript” src=”js/jquery-1.10.1.min.js”></script>
<script src=”js/jquery.touchSwipe.min.js”></script>

javascript代码

var imgcount = $(“.banner .bannerimg”).length;//计算有多少张图片

var qiehuan = window.setInterval(“changeBanner(” + imgcount + “)”, 3000);//此处为调用自动循环切换功能

$(“.banner”).swipe({

swipe: function(event, direction, distance, duration, fingerCount) {
var xuhao;//计数工具
$(“.bannerradio li”).each(function() {
if ($(this).hasClass(“cover”)) {
xuhao = $(this).index();
return false;
}
});//初始化xuhao
if (direction == “left”) {
xuhao++;

} else if (direction == “right”) {
xuhao–;
}
var thisindex = xuhao % imgcount;//获取当前焦点图的索引
if (xuhao < 0) {
if (xuhao % imgcount != 0) {
thisindex = xuhao % imgcount + imgcount;
} else {
thisindex = 0;
}
}
$(“.bannerradio li”).eq(thisindex).siblings(“li”).removeClass(“cover”);
$(“.bannerradio li”).eq(thisindex).addClass(“cover”);
bannerAnimation(thisindex, direction, imgcount);//图片切换功能
window.clearInterval(qiehuan);//
qiehuan = window.setInterval(“changeBanner(” + imgcount + “)”, 3000);//以上两行是自动切换功能

}
});

function bannerAnimation(index, direction, counts) {

if (direction == “left”) {
$(“.bannerimg”).eq(index).css(“margin-left”, $(“body”).width() + “px”);

$(“.bannerimg”).eq(index – 1).animate({
“margin-left”: “-” + $(” body “).width() + “px”
});
$(“.bannerimg”).eq(index).animate({
“margin-left”: “0px”
});

} else if (direction == “right”) {
$(“.bannerimg”).eq(index).css(“margin-left”, “-” + $(” body “).width() + “px”);
$(“.bannerimg”).eq(index).animate({
“margin-left”: “0px”
});
if (index == counts – 1) {
$(“.bannerimg”).eq(0).animate({
“margin-left”: $(” body “).width() + “px”
});
} else {
$(“.bannerimg”).eq(index + 1).animate({
“margin-left”: $(” body “).width() + “px”
});
}

}
}

function changeBanner(counts) {

var flag = 0;
$(“.bannerradio li”).each(function() {
if ($(this).hasClass(“cover”)) {
flag = $(this).index();
return false;
}
});
if (flag == counts – 1) {
flag = -1;
}
$(“.bannerradio li”).eq(flag + 1).addClass(“cover”);
$(“.bannerradio li”).eq(flag + 1).siblings().removeClass(“cover”);
bannerAnimation(flag + 1, “left”, counts);

}

未经允许不得转载：前端撸码笔记 » touchSwipe实例：手机端手指滑动banner翻页效果，带自动循环功能