<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>焦點輪播圖</title>
<style>
*{margin:0; padding:0}
img{border:0; vertical-align:bottom}
a{text-decoration:none}
#container{width:600px; height:400px; border:1px solid #333; overflow:hidden; position:relative; margin:30px auto}
#list{width:4200px; height:400px; position:absolute}
#list img{float:left}
#buttons{ height:10px; width:100px; position:absolute; bottom:20px; left:250px}
#buttons span{ width:8px; height:8px; float:left; border-radius:5px; border:1px #fff solid; margin:0 10px 0 0}
#buttons .on{background:#fff}
.arrow{cursor:pointer; line-height:39px; text-align:center; font-size:36px; position:absolute; font-weight:bold; top:170px; color:#fff; display:block; width:35px; border-radius:5px; display:none}
.arrow:hover{background-color:RGBA(0,0,0,.5)}
#container:hover .arrow{display:block;}
#prev{left:20px}
#next{right:20px}
</style>
<script>
window.onload=function(){
var container=document.getElementById("container");
var list=document.getElementById("list");
var buttons=document.getElementById("buttons").getElementsByTagName("span");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var index=1;//小圓點位置
var animated=false;//判斷是否在運行animat函數
var timer;
//改變小圓點的當前顏色
function showButton(){
for(var i=0; i<buttons.length; i++){
buttons[i].className='';
}
buttons[index-1].className='on';
}
//切換圖片（判斷第一張和最后一張特殊的位置），offset每次切換的數值
function animate(offset){//
animated=true;
var newLeft=parseInt(list.style.left)+offset;
var time=300;//位移總時間
var interval=10;//位移間隔時間
var speed=offset/ (time/interval);//每次位移量(負數：向左； 正數：向右)
function go(){
if((speed<0 && parseInt(list.style.left)>newLeft) || (speed>0 && parseInt(list.style.left) < newLeft)){
list.style.left=parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);//調自己的函數，即遞歸
}
else{
animated = false;
list.style.left = newLeft+'px';
if(newLeft > -600){//img1的位置
list.style.left = -3000 + 'px';
}
if(newLeft < -3000){//img2的位置
list.style.left = -600 + 'px';
}
}
}
go();
}
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
function stop(){
clearInterval(timer);
}
play();
container.onmouseover = stop;
container.onmouseout = play;
next.onclick=function(){
if(index==5){
index=1;
}else{
index+=1;
}
showButton();
if(!animated){
animate(-600);
}
}
prev.onclick=function(){
if(index==1){
index=5;
}else{
index-=1;
}
showButton();
if(!animated){
animate(600);
}
}
for(var i=0; i<buttons.length; i++){
buttons[i].onclick=function(){
if(this.className=='on'){//當點擊當前圖片的小圖標，return退出當前函數
return;
}
//獲取當前點擊時屬性里的Index值
var myIndex=parseInt(this.getAttribute('index'));//獲取自定義屬性或dom自帶屬性
var offset=-600*(myIndex-index);
if(!animated){
animate(offset);
}
index=myIndex;
showButton();
}
}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left:-600px">
<img src="images/5.jpg" alt=""/>
<img src="images/1.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>
<img src="images/4.jpg" alt=""/>
<img src="images/5.jpg" alt=""/>
<img src="images/1.jpg" alt=""/>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2" ></span>
<span index="3" ></span>
<span index="4" ></span>
<span index="5" ></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>
2014-12-20
贊一個！