<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Banner-jQuery</title>
<style type="text/css">
*{margin:0;padding: 0;}
.container{width: 80%;height: 500px;overflow: hidden;margin:0 auto;position: relative;}
#list{width: 700%;height: 500px;position: absolute;}
#list img{width: 14.285715%;;float: left;cursor: pointer;}
.arrow{position: absolute;color:#fff;text-decoration: none;bottom: 20px;text-align: center;width: 40px;height: 40px;font-size: 30px;top:230px;font-weight: bold;background: rgba(0,0,0,0.3);}
#left{left:20px;}
#right{right: 20px;}
.btns{width: 100px;height: 10px;position: absolute;bottom: 20px;left: 42%;}
.btns span{cursor: pointer;border: 1px solid #fff;border-radius: 50%;margin-right: 8px;-webkit-border-radius:50%;-moz-border-radius:50%;width: 10px;height: 10px;float: left;}
.btns .on{background: orange;}
</style>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container" id="container">
<div id="list">
<img alt="5" src='http://i1.piimg.com/576342/a59848cad8818bd4.jpg'>
<img alt="1" src='http://i1.piimg.com/576342/9bc3a6f38f9eca10.jpg'>
<img alt="2" src='http://i1.piimg.com/576342/82507633c9d21ebf.jpg'>
<img alt="3" src='http://image60.360doc.com/DownloadImg/2013/04/1613/31674132_21.jpg'>
<img alt="4" src='http://i1.piimg.com/576342/5935e1921d2d5fb0.jpg'>
<img alt="5" src='http://i1.piimg.com/576342/a59848cad8818bd4.jpg'>
<img alt="1" src='http://i1.piimg.com/576342/9bc3a6f38f9eca10.jpg'>
</div>
<a href="javascript:void(0)" class="arrow" id="left" ><</a>
<a href="javascript:void(0)" class="arrow" id="right" >></a>
<div class="btns">
<span class="on" index="1"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
</div>
<script type="text/javascript">
$(function(){
var oList = $("#list");
var oRight = $("#right");
var oLeft = $("#left");
var oWidth = parseInt(oList.css('width')) / 7; //計算圖片的寬度從而達到自適應屏幕寬度
var oSpan = $(".btns span");
var len = 5;
var index = 1;
var interval = 3000;
var timer = null;
oList.css('left',-oWidth); //圖片加載完成時將圖片向左偏移一張圖片
function animate(offset){ //過渡效果
var newLeft = parseInt(oList.css('left')) + offset; //點擊后的圖片偏移量
oList.animate({'left':newLeft + 'px'},function(){
if(newLeft > 0){ //判斷圖片是否已經循環一次
oList.css('left',-oWidth * len);
}
if(newLeft < -oWidth * 5){
oList.css('left',-oWidth);
}
});
}
function showBtns(){ //按鈕過渡
oSpan.each(function(){ //遍歷每個按鈕將其Class設置為空
$(this).attr('class','');
});
$(".btns > span").eq(index - 1).addClass('on'); //將當前Span的索引Class設置為on
}
function autoplay(){ //自動播放
timer = setTimeout(function(){
oRight.trigger('click');
autoplay();
},interval);
}
function stop(){
clearInterval(timer);
}
oList.on('mouseover',function(){ //判斷鼠標是否在容器上面
stop();
});
oList.on('mouseout',function(){
autoplay();
});
oRight.on('click',function(){
if(oList.is(':animated')){
return;
}
if(index == 5){ //向右點擊 index索引+1
index = 1;
}else{
index += 1;
}
animate(-oWidth);
showBtns();
});
oLeft.on('click',function(){
if(oList.is(':animated')){
return;
}
if(index == 1){ //向左點擊 index索引-1
index = 5;
}else{
index -= 1;
}
animate(oWidth);
showBtns();
});
oSpan.each(function(){ //底部按鈕點擊切換圖片
$(this).on('click',function(){
if(oList.is(":animated") || $(this).attr('class') == "on"){
return;
}
var myIndex = $(this).attr('index');
var offset = (myIndex - index) * -oWidth;
index = myIndex;
animate(offset);
showBtns();
})
})
autoplay();
});
</script>
</body>
</html>
復制代碼，將圖片改成相同像素圖片即可直接使用
el.animate()確實好用，原生JS寫一大串動畫過渡代碼，animate只寫一行即可
這種方法的好處主要是在與百分比自適應屏幕，靈活性比之前的固定布局好不少
同時比上一篇輪播圖增加了按鈕點擊切換圖片