轮播图的html
<div class="carousel" id="carousel">
<div class="btns">
<a class="leftBtn" id="leftBtn"></a>
<a class="rightBtn" id="rightBtn"></a>
</div>
<div class="imageslist" id="imageslist">
<ul>
<li class="first"><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.carousel{
width: 560px;
height: 300px;
margin: 100px auto;
border: 1px solid #333;
position: relative;
}
.carousel ul{
list-style: none;
}
.carousel ul li{
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter:alpha(opacity = 0);
}
.carousel ul li.first{
opacity: 1;
filter:alpha(opacity = 0);
}
.btns a{
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
background-color: orange;
font-size: 30px;
line-height: 40px;
text-align: center;
border-radius: 50%;
font-weight: bold;
cursor: pointer;
z-index: 999;
}
.btns a:hover{
background-color: gold;
}
.leftBtn{
left: 10px;
}
.rightBtn{
right: 10px;
}
.circles{
position: absolute;
width: 150px;
height: 16px;
bottom: 10px;
right: 10px;
}
.circles ol{
list-style: none;
}
.circles ol li{
float: left;
width: 16px;
height: 16px;
background-color: orange;
margin-right: 6px;
border-radius: 50%;
cursor: pointer;
}
.circles ol li.cur{
background-color: red;
}
第一步、获取元素（DOM操作）
var carousel = document.getElementById("carousel");
//获取到最外面的div
var lis = document.getElementById("imageslist").getElementsByTagName("li");
//获取到的轮播图片
var leftBtn = document.getElementById("leftBtn");
//获取到左边按钮
var rightBtn = document.getElementById("rightBtn");
//获取到右边按钮
var circlesLi = document.getElementById("circles").getElementsByTagName("li");
//获取到轮播图下面的小圆点
var imgLength = lis.length;
//获取到轮播图片数
var width = 560;
//定义每张图片的宽度为560px
var animatetime = 300;
//每张图片的运动时常
var tween = "Linear";
//tween为缓冲运动“Linear为匀速运动”
var interval = 2000;
//每间隔2000毫秒轮播一次
var idx = 0;
//idx为传入的信号量
第二步、创建改变图片透明度的函数 rightBtnHandler
function rightBtnHandler(){
//函数截流
if(lis[idx].isanimated) return;
//将当前图片淡出
animate(lis[idx],{"opacity" : 0},1000);
//信号量改变
idx++;
if(idx > imgLength - 1){
idx = 0;
}
//将下一张图片淡入
animate(lis[idx],{"opacity" : 1},1000);
//调用改变小圆点的函数
changeCircle();
}
第三步、创建定时器让轮播图自动轮播
var timer = setInterval(rightBtnHandler,interval);
//创建了一个名为timer的定时器让图片每interval(2000)毫秒轮播一次
carousel.onmouseover = function(){
clearInterval(timer);
}
//鼠标进入最外层div时轮播停止
carousel.onmouseout = function(){
timer = setInterval(rightBtnHandler,interval);
}
//鼠标离开最外层div时轮播继续
第四步、通过小圆点改变轮播图片
for(var i = 0 ; i <= imgLength - 1 ; i++){
circlesLi[i].index = i;
//将i值保留在第i个小圆点的index属性里
circlesLi[i].onclick = function(){
//截流
if(lis[idx].isanimated) return;
//原来的信号量的图片淡出
animate(lis[idx],{"opacity" : 0},1000);
//信号量改变
idx = this.index;
//新信号量的图片淡入
animate(lis[idx],{"opacity" : 1},1000);
//调用改变小圆点的函数
changeCircle();
}
}
第五步、通过排他来让小圆点的样式改变
function changeCircle(){
//先让所有的小圆点的className为空颜色为黄色
for (var i = 0; i < circlesLi.length; i++) {
circlesLi[i].className = "";
}
//让当前的小圆点的className为cur颜色为红色
circlesLi[idx].className = "cur";
}
第六步、通过左右按钮改变轮播图片
rightBtn.onclick = rightBtnHandler;
//由于右按钮与轮播函数rightBtnHandler相同所以可以直接引用
//左按钮与右按钮基本相同只不过是让图片递减显示
leftBtn.onclick = function(){
//函数截流
if(lis[idx].isanimated) return;
//原来的信号量的图片淡出
animate(lis[idx],{"opacity" : 0},1000);
//信号量改变
idx--;
if(idx < 0){
idx = imgLength - 1;
}
//新信号量的图片淡入
animate(lis[idx],{"opacity" : 1},1000);
//调用改变小圆点的函数
changeCircle();
}
