代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右輪播圖實(shí)例</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 750px;
height: 292px;
margin: 30px auto;
position: relative;
overflow: hidden;
}
.wrap .boxbanner{
position: absolute;
left: 0;
top: 0;
width: 3000px;
height: 292px;
}
.wrap .boxbanner img{
float: left;
width: 750px;
height: 292px;
vertical-align: middle;
}
.wrap ul{
position: absolute;
width: 140px;
left: 50%;
margin-left: -70px;
bottom: 10px;
}
.wrap ul li{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: lightslategray;
float: left;
}
.wrap ul li+li{
margin-left: 20px;
}
.wrap ul li.active{
background-color: orangered;
}
.wrap a{
position: absolute;
width: 43px;
height: 67px;
top:50%;
margin-top: -30px;
background-image: url("image1/6.png");
background-repeat: no-repeat;
opacity: 0.5;
filter: alpha(opacity=50);
display: none;
}
.wrap a.Left{
left: 10px;
background-position: 0 0;
}
.wrap a.Right{
right: 10px;
background-position: -63px 0;
}
.wrap a:hover{
opacity: 1;
filter: alpha(opacity=100);
}
</style>
</head>
<body>
<div class="wrap">
<div class="boxbanner">
<img src="image1/1.jpg" alt="">
<img src="image1/2.jpg" alt="">
<img src="image1/3.jpg" alt="">
<img src="image1/4.jpg" alt="">
</div>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:void(0);" class="Left"></a>
<a href="javascript:void(0);" class="Right"></a>
</div>
<script src="utils.js"></script>
<script src="moveEffect.js"></script>
<script src="animatSuper.js"></script>
<script src="banner.js"></script>
</body>
</html>
//1 獲取元素
var oWrap=utils.getByClass("wrap",document)[0];
var oboxBanner=utils.getByClass("boxbanner",oWrap)[0];
var aImg=oboxBanner.getElementsByTagName("img");
var aBtn=oWrap.getElementsByTagName("li");
var Left=utils.getByClass("Left",oWrap)[0];
var Right=utils.getByClass("Right",oWrap)[0];
//2 在最后添加一張與第一張相同的圖片手素，調(diào)整寬度
oboxBanner.innerHTML+='<img src="image1/1.jpg" alt="">';
oboxBanner.style.width=3750+"px";
//3 創(chuàng)建全局變量n鸳址，作為圖片運(yùn)動(dòng)的left值設(shè)置，及對(duì)應(yīng)的按鈕的設(shè)置
var n=0;
//4 圖片自動(dòng)輪播泉懦，開啟定時(shí)器自動(dòng)輪播
var timer=setInterval(autoMove,2000);
//autoMove是一個(gè)運(yùn)動(dòng)過程
function autoMove() {
//邊界值判斷
if(n>=aImg.length-1){
n=0;
oboxBanner.style.left=0;
}
n++;
//此處的n值為：1,2,3,4,1,2,3,4依次循環(huán)
//oboxBanner.style.left=-n*750+"px";
//移動(dòng)的效果用運(yùn)動(dòng)效果來實(shí)現(xiàn)稿黍，animate
animate({
ele:oboxBanner,
duration: 500,
effect:2,
target:{
left:-n*750//此處left不能設(shè)置單位；
}
});
bannerTip();
}
//5 焦點(diǎn)跟隨輪播
function bannerTip() {
for(var i=0; i<aBtn.length; i++){
aBtn[i].className=i==n%4?"active":null;
}
}
//6 鼠標(biāo)移入停止運(yùn)動(dòng)
oWrap.onmouseover=function () {
clearInterval(timer);
Left.style.display=Right.style.display="block";
};
//7 鼠標(biāo)移出繼續(xù)運(yùn)動(dòng)
oWrap.onmouseout=function () {
timer=setInterval(autoMove,2000);
Left.style.display=Right.style.display="none";
};
//8 點(diǎn)擊li元素時(shí)崩哩，顯示對(duì)應(yīng)的圖片
handleChange();
function handleChange() {
for(var i=0; i<aBtn.length; i++){
(function (index) {
aBtn[index].onclick=function () {
n=index-1;
autoMove();
}
})(i);
}
}
//9 左右按鈕點(diǎn)擊運(yùn)動(dòng)
handleLeftRight();
function handleLeftRight() {
Left.onclick=function () {
if(n<=0){
n=aImg.length-1;
oboxBanner.style.left=-n*750+"px";
}
n--;
animate({
ele:oboxBanner,
duration: 500,
effect:2,
target:{
left:-n*750//此處left不能設(shè)置單位巡球；
}
});
bannerTip();
};
Right.onclick=function () {
autoMove();
}
}
