仿天猫、京东、麦包包等，无缝循环轮播图的开发（jQuery）
2017-05-23 本文已影响196人
被时光移动的城
我之前写过一个常见的轮播图效果，详情见：http://www.jianshu.com/p/44ab9edd8c57
本文内容实现的是无缝循环轮播图效果，也比较常见，天猫、京东、麦包包中也经常会有。图片自动滑动，且点击下面文字（指示器）进行图片的切换。
如果想让动画效果更有趣，可引入jquery.easing包，里面有很多贝塞尔曲线特效，结合animate里使用，效果会更加炫酷！
实现效果：
无缝轮播图.gif
实现原理：
image.png
实现难点：
1、解决点击事件与轮播动画的问题（注：点击时候不轮播，轮播动画时不可点击）
2、解决指示器显示异常问题
3、解决动画叠加问题
代码（文中5张图片大小均为：952x440，最后第6张与第一张相同）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#bor{
width: 952px;
height: 440px;
border: 2px black solid;
margin: 200px auto;
overflow: hidden;
position: relative;
}
#bor #pic_bor{
width: 5712px;
height: 440px;
position: absolute
}
#bor #pic_bor img{
float: left;
}
#bor ul{
width: 585px;
height: 30px;
bottom: 0px;
right: 0px;
position: absolute
}
#bor ul li{
width: 116px;
height: 30px;
color: white;
list-style: none;
font-family: '宋体';
font-size: 12px;
line-height: 30px;
text-align: center;
margin-left: 1px;
background: black;
float: left;
opacity: 0.4;
}
#bor ul li:hover{
color: #c00;
text-decoration: underline;
}
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var i = 0;//用于做标记
var inTimer;//将定时器设置成成员变量
var outTimer;
var isCli = true;
//图片轮播函数
function run(){
i++;
if(i==6){//如果最后一张，left属性改变成0
$("#bor #pic_bor").css({'left':0+'px'});
i=1;
}
var left = i*-952;
isCli = false;//轮播动画切换时不可点击
$("#bor #pic_bor").animate({'left':left+'px'},300,function(){
isCli = true;
});
if(i==5){//指示器显示问题解决
$("#bor ul li").eq(0).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
}else{
$("#bor ul li").eq(i).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
}
}
inTimer = setInterval(run,2000);
// li的点击的时候不让有轮播动画
$("#bor ul li").click(function(){
if(!isCli){//动画不能点击
return;
}
//清理定时器
clearTimeout(outTimer);
//清理定时器
clearInterval(inTimer);
//点击的时候不开启定inTimer
outTimer = setTimeout(function(){
inTimer = setInterval(run,2000);
},400);
// 标记
var liThis = $(this);
i = liThis.index();
var picl = i*-952;
//指示器
$("#bor ul li").eq(i).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
//轮播
$("#bor #pic_bor").stop().animate({'left':picl+'px'},300);
})
})
</script>
</head>
<body>
<div id="bor">
<div id="pic_bor">
</div>
<ul>
<li style="opacity: 0.7;">起舞少女</li>
<li>小小心机</li>
<li>海岛假日</li>
<li>星空幻想</li>
<li>马戏游园</li>
</ul>
</div>
</body>
</html>
下载：https://github.com/wangwei66666/SeamlessSlideshow/tree/master
如有问题欢迎交流。
如转载请注明出处，谢谢！
