还是先贴代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style>
*{margin: 0;padding: 0}
#slider{width: 800px;height: 450px;display:block;margin: 0 auto;margin-top: 100px;border:1px solid #ddd;overflow: hidden;position: relative;}
#slider li{display: block;float: left;}
#slider li img{width: 800px;height: 450px;}
#slider button.up{position: absolute;top: 50%;z-index: 9;left: 20px;width: 50px;height: 50px;text-align: center;}
#slider button.down{position: absolute;top: 50%;z-index: 9;right: 20px;width: 50px;height: 50px;text-align: center;}
</style>
</head>
<body>
<div id="slider">
<ul>
<li><a href=""><img src="img/1.jpg" alt="" /></a></li>
<li><a href=""><img src="img/2.jpg" alt="" /></a></li>
<li><a href=""><img src="img/3.jpg" alt="" /></a></li>
</ul>
<button class="up">向上</button>
<button class="down">向下</button>
</div>
<script>
// Decode slider QQ:970220385
var sliderWidth = $("#slider li").width();
var sliderSize = $("#slider li").size();
var sliderUl = $("#slider ul")
sliderUl.width(sliderWidth*sliderSize);
var timer
function time(){
timer=setInterval(function(){
slider();
},3000);
}
var i = 0
function slider(){
if (i>=sliderSize-1) {
i = 0
} else {
i ++
}
sliderUl.stop().animate({marginLeft: -sliderWidth*i}, 500);
};
time()
$("button.up").click(function(event) {
if( i !== 0){
sliderUl.stop().animate({marginLeft: -(i-1)*sliderWidth}, 500);
i --
}else{
i = sliderSize-1
sliderUl.stop().animate({marginLeft: -i*sliderWidth}, 500);
};
clearInterval(timer)
time();
});
$("button.down").click(function(event) {
slider();
clearInterval(timer)
time();
});
</script>
</body>
</html>
大概思路
实现思路差不多就是先建立一个定时器
- 对变量 i 进行每3s一次+1
- 然后获取页面中需要滚动的图片数量
- 利用margin-left乘以 i 配合animate进行动画滚动。
- 判断i的数值是否大于图片滚动的数量，如果大于将变量赋值0
- 左右按钮直接利用slider（）方法先强行执行一次动画并且i++
- 这时候大家会发现一个小bug，就是当你不停地点左右的时候就会出现滚动误差，所以这里我们用clearInterval(timer)方法去暂停一下原来的事件，再执行time（）
总结：
大概就是利用了i的数值一个循环再判断的方法，十分简单，没有深入研究过代码简化，望有更好的方法解决，欢迎学习前端的朋友加我的qq.970220385 有什么不明白也可以一起交流探讨
