代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右轮播图实例</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 在最后添加一张与第一张相同的图片，调整宽度
oboxBanner.innerHTML+='<img src="image1/1.jpg" alt="">';
oboxBanner.style.width=3750+"px";
//3 创建全局变量n，作为图片运动的left值设置，及对应的按钮的设置
var n=0;
//4 图片自动轮播，开启定时器自动轮播
var timer=setInterval(autoMove,2000);
//autoMove是一个运动过程
function autoMove() {
//边界值判断
if(n>=aImg.length-1){
n=0;
oboxBanner.style.left=0;
}
n++;
//此处的n值为：1,2,3,4,1,2,3,4依次循环
//oboxBanner.style.left=-n*750+"px";
//移动的效果用运动效果来实现，animate
animate({
ele:oboxBanner,
duration: 500,
effect:2,
target:{
left:-n*750//此处left不能设置单位；
}
});
bannerTip();
}
//5 焦点跟随轮播
function bannerTip() {
for(var i=0; i<aBtn.length; i++){
aBtn[i].className=i==n%4?"active":null;
}
}
//6 鼠标移入停止运动
oWrap.onmouseover=function () {
clearInterval(timer);
Left.style.display=Right.style.display="block";
};
//7 鼠标移出继续运动
oWrap.onmouseout=function () {
timer=setInterval(autoMove,2000);
Left.style.display=Right.style.display="none";
};
//8 点击li元素时，显示对应的图片
handleChange();
function handleChange() {
for(var i=0; i<aBtn.length; i++){
(function (index) {
aBtn[index].onclick=function () {
n=index-1;
autoMove();
}
})(i);
}
}
//9 左右按钮点击运动
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不能设置单位；
}
});
bannerTip();
};
Right.onclick=function () {
autoMove();
}
}
