還是先貼代碼
<!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>
大概思路
實(shí)現(xiàn)思路差不多就是先建立一個定時器
- 對變量 i 進(jìn)行每3s一次+1
- 然后獲取頁面中需要滾動的圖片數(shù)量
- 利用margin-left乘以 i 配合animate進(jìn)行動畫滾動愚墓。
- 判斷i的數(shù)值是否大于圖片滾動的數(shù)量，如果大于將變量賦值0
- 左右按鈕直接利用slider（）方法先強(qiáng)行執(zhí)行一次動畫并且i++
- 這時候大家會發(fā)現(xiàn)一個小bug祠汇，就是當(dāng)你不停地點(diǎn)左右的時候就會出現(xiàn)滾動誤差腾供，所以這里我們用clearInterval(timer)方法去暫停一下原來的事件锨亏，再執(zhí)行time（）
總結(jié)：
大概就是利用了i的數(shù)值一個循環(huán)再判斷的方法活合，十分簡單文判，沒有深入研究過代碼簡化胧谈，望有更好的方法解決忆肾，歡迎學(xué)習(xí)前端的朋友加我的qq.970220385 有什么不明白也可以一起交流探討
