首先分析一下這個特效的主要用到的知識。
1.布局方面，輪播的幾張圖檔的大小必須是一樣大的，而且父容器大小為一張照片大小，其餘看不見的部分hidden,通過JS改變圖檔的left值來實作圖檔的輪播。
2.左右點選按鈕，還有圖下方的按鈕，均為他們添加點選事件，改變圖檔的left值。
3.自動播放功能，就是設定了定時器，當滑鼠移開的時候，觸發定時器。滑鼠回到container時，清除定時器。
源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圖檔焦點輪播特效</title>
<style>
*{ margin: 0; padding: 0; text-decoration: none;}
body { padding: 20px;}
#container {
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden;
position: relative;
}
#list{
width: 4200px;
height: 400px;
position: absolute;
z-index: 1;
}
#list img {
float: left;
}
#buttons {
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}
#buttons span {
cursor:pointer;
float: left;
border: 1px solid #fff;
width: 10px; height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
#buttons .on {
background: orangered;
}
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0,0,0,.3);
color: #fff;
}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow { display: block;}
#prev { left: 20px;}
#next { right: 20px;}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/5.jpg" />
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
<img src="img/1.jpg" />
</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:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="prev" class="arrow"><</a>
<a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" id="next" class="arrow">></a>
</div>
<script>
window.οnlοad=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; //動畫是否在變動
var timer; //定時器
//按鈕變亮
function showButton(){
for(var i=0;i<buttons.length;i++){
buttons[i].className="";
}
buttons[index-1].className="on";
}
//圖檔切換
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){
list.style.left=-3000 + "px";
}
if(newLeft<-3000){
list.style.left =-600 +"px";
}
}
}
go();
}
//自動播放
function play(){
timer=setInterval(function(){
next.onclick();
},3000);
}
//停止播放
function stop(){
clearInterval(timer);
}
//為容器添加事件
container.οnmοuseοver=stop;
container.οnmοuseοut=play;
play();
//左邊的按鈕添加點選事件
next.οnclick=function(){
if(index == 5){
index=1;
}else{
index +=1;
}
showButton();
if(!animated){
animate(-600);
}
}
//左邊的按鈕添加點選事件
prev.οnclick=function(){
if(index == 1){
index=5;
}else{
index -=1;
}
showButton();
if(!animated){
animate(600);
}
}
//為每個小按鈕添加點選事件
for(var i=0;i<buttons.length;i++){
buttons[i].οnclick=function(){
if(this.className == "on"){
return;
}
var myIndex=parseInt(this.getAttribute("index"));
var offset=-600*(myIndex -index);
if(!animated){
animate(offset);
}
index=myIndex;
showButton();
}
}
}
</script>
</body>
</html>
![模仿百度首頁的圖檔輪播[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)