传统的轮播图
一个 carousel 轮播图，图片实现自动轮播，可以左右按钮播放，点小圆点也能实现换图。同时设置节流。
一个小知识点：行内插入 JavaScript 代码
一个a标签，但是我们不希望点击之后有任何默认的事情，默认事情通常是刷新当前页：
<a href="javascript:;" ></a> //点击无任何效果
还可以
<a href="javascript:alert("干什么，不知道我是行内代码吗？";"></a> //弹出alert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动传统轮播</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.carousel{
width: 560px;
height: 300px;
margin: 100px auto;
border: 1px solid #333;
position: relative;
overflow: hidden;
}
.carousel .m_unit{
width: 5000px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.carousel ul{
list-style: none;
}
.carousel ul li{
float: left;
width: 560px;
height: 300px;
}
.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;
opacity: 0.6;
}
.circles ol li.cur{
background-color: red;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<div class="btns">
<a class="leftBtn" id="leftBtn"></a>
<a class="rightBtn" id="rightBtn"></a>
</div>
<div class="m_unit" id="m_unit">
<ul>
<li><a><img src="images/0.jpg" alt="" /></a></li>
<li><a><img src="images/1.jpg" alt="" /></a></li>
<li><a><img src="images/2.jpg" alt="" /></a></li>
<li><a><img src="images/3.jpg" alt="" /></a></li>
<li><a><img src="images/4.jpg" alt="" /></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>
// version2.0.1
// 这个版本主要修改:
// 1)修改了变量名frameNumber
// 2)让回调函数中的this就是elem
// 3)增加了缓冲功能
// 4)函数的重载
// 5)为了函数节流方便，我们给运动的这个对象添加了一个属性isanimated，动画的时候这个属性是true，动画停止就是false。
/*
* animate函数是动画封装函数
* @para0 elem参数就是运动的对象
* @para1 targetJSON参数就是运动的终点状态，可以写px，也可以不写px
* @para2 time是运动总时间，毫秒为单位
* @para3 tweenString缓冲描述词，比如"Linear"，可选
* @para4 callback是回调函数，可选
* return 本函数没有返回值
*/
function animate(elem , targetJSON , time , tweenString , callback){
//函数重载，用户传进来的参数数量、类型可能不一样
//检查数量和类型
if(arguments.length < 3 || typeof arguments[0] != "object" || typeof arguments[1] != "object" || typeof arguments[2] != "number"){
throw new Error("对不起，你传进来的参数数量不对或者参数类型不对，请仔细检查哦！");
return;
}else if(arguments.length == 3){
//用户只传进来3个参数，表示tweenString、callback被省略了，那么我们默认使用Linear当做缓冲词
tweenString = "Linear";
//默认回调函数是null
callback = null;
}else if(arguments.length == 4){
//用户只传进来4个参数，第4个参数可能传进来的是tweenString，也可能是callback
switch(typeof arguments[3]){
case "string" :
//用户传进来的是缓冲描述词儿，所以就把callback补为null
callback = null;
break;
case "function" :
callback = arguments[3];
arguments[3] = "Linear";
break;
default :
throw new Error("抱歉，第4个参数要么是缓冲描述词，要么是回调函数，请检查！");
}
}
//动画间隔要根据不同浏览器来设置：
if(window.navigator.userAgent.indexOf("MSIE") != -1){
var interval = 50;
}else{
var interval = 20;
}
//强行给我们的动画元素增加一个isanimated的属性，是否正在运动
elem.isanimated = true;
//初始状态，放在origninalJSON里面
var originalJSON = {};
//变化的多少，放在deltaJSON里面
var deltaJSON = {};
//给信号量对象添加属性，添加什么属性，目标对象中有什么属性，这里就添加什么属性
//值就是当前的计算样式
for(var k in targetJSON){
//初试JSON
originalJSON[k] = parseFloat(fetchComputedStyle(elem , k));
//把每个targetJSON中的值都去掉px
targetJSON[k] = parseFloat(targetJSON[k]);
//变化量JSON
deltaJSON[k] = targetJSON[k] - originalJSON[k];
}
// 至此我们得到了三个JSON：
// originalJSON 初始状态集合，这个JSON永远不变
// targetJSON 目标状态集合，这个JSON永远不变
// deltaJSON 差值集合，这个JSON永远不变
// console.log(originalJSON);
// console.log(targetJSON);
// console.log(deltaJSON);
//总执行函数次数：
var maxFrameNumber = time / interval;
//当前帧编号
var frameNumber = 0;
//这是一个临时变量一会儿用
var n;
//定时器
var timer = setInterval(function(){
//要让所有的属性发生变化
for(var k in originalJSON){
//动：
// n就表示这一帧应该在的位置：
n = Tween[tweenString](frameNumber , originalJSON[k] , deltaJSON[k] , maxFrameNumber);
//根据是不是opacity来设置单位
if(k != "opacity"){
elem.style[k] = n + "px";
}else{
elem.style[k] = n;
elem.style.filter = "alpha(opacity=" + n * 100 + ")";
}
}
//计数器
frameNumber++;
if(frameNumber == maxFrameNumber){
//次数够了，所以停表。
//这里抖一个小机灵，我们强行让elem跑到targetJSON那个位置
for(var k in targetJSON){
if(k != "opacity"){
elem.style[k] = targetJSON[k] + "px";
}else{
elem.style[k] = targetJSON[k];
elem.style.filter = "alpha(opacity=" + (targetJSON[k] * 100) + ")";
}
}
//停表
clearInterval(timer);
//拿掉是否在动属性，设为false
elem.isanimated = false;
//调用回调函数，并且让回调函数中的this表示运动的对象
//我们加上了判断，如果callback存在，再执行函数
callback && callback.apply(elem);
}
},interval);
//之前的轮子，计算后样式
function fetchComputedStyle(obj , property){
//能力检测
if(window.getComputedStyle){
//现在要把用户输入的property中检测一下是不是驼峰，转为连字符写法
//强制把用户输入的词儿里面的大写字母，变为小写字母加-
//paddingLeft → padding-left
property = property.replace(/([A-Z])/g , function(match,$1){
return "-" + $1.toLowerCase();
});
return window.getComputedStyle(obj)[property];
}else{
//IE只认识驼峰，我们要防止用户输入短横，要把短横改为大写字母
//padding-left → paddingLeft
property = property.replace(/\-([a-z])/g , function(match,$1){
return $1.toUpperCase();
});
return obj.currentStyle[property];
}
}
//缓冲的各种公式
var Tween = {
Linear: function(t, b, c, d) {
return c * t / d + b;
},
//二次的
QuadEaseIn: function(t, b, c, d) {
return c * (t /= d) * t + b;
},
QuadEaseOut: function(t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
QuadEaseInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
},
//三次的
CubicEaseIn: function(t, b, c, d) {
return c * (t /= d) * t * t + b;
},
CubicEaseOut: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
CubicEaseInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
},
//四次的
QuartEaseIn: function(t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
QuartEaseOut: function(t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
QuartEaseInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
},
QuartEaseIn: function(t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
QuartEaseOut: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
QuartEaseInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
},
//正弦的
SineEaseIn: function(t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
SineEaseOut: function(t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
SineEaseInOut: function(t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
},
ExpoEaseIn: function(t, b, c, d) {
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
ExpoEaseOut: function(t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
ExpoEaseInOut: function(t, b, c, d) {
if (t == 0) return b;
if (t == d) return b + c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
CircEaseIn: function(t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
CircEaseOut: function(t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
CircEaseInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
},
ElasticEaseIn: function(t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else var s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
ElasticEaseOut: function(t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else var s = p / (2 * Math.PI) * Math.asin(c / a);
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
ElasticEaseInOut: function(t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d / 2) == 2) return b + c;
if (!p) p = d * (.3 * 1.5);
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else var s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
},
//冲过头系列
BackEaseIn: function(t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
BackEaseOut: function(t, b, c, d, s ) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
BackEaseInOut: function(t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
},
//弹跳系列
BounceEaseIn: function(t, b, c, d) {
return c - Tween.BounceEaseOut(d - t, 0, c, d) + b;
},
BounceEaseOut: function(t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
BounceEaseInOut: function(t, b, c, d) {
if (t < d / 2) return Tween.BounceEaseIn(t * 2, 0, c, d) * .5 + b;
else return Tween.BounceEaseOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
};
}
<script type="text/javascript">
//得到carousel
var carousel = document.getElementById("carousel");
//得到运动机构
var m_unit = document.getElementById("m_unit");
//得到ul
var carouselUL = m_unit.getElementsByTagName("ul")[0];
//得到li
var lis = m_unit.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;
//滚动速度
var animatetime = 600;
//缓冲描述
var tween = "BounceEaseOut";
//间隔时间
var interval = 2000;
//函数截流
var lock = true;
//把0号li克隆，然后插入到carouselUL的最后面
//先放在心里，我们下午有专题DOM节点操作
carouselUL.appendChild(lis[0].cloneNode(true));
//信号量
var nowimg = 0; //0、1、2、3、4。 5是临时状态
//右按钮的事件
rightBtn.onclick = rightBtnHandler;
//自动轮播
var timer = setInterval(rightBtnHandler,interval);
//鼠标进入停止
carousel.onmouseover = function(){
clearInterval(timer);
}
//鼠标离开开始
carousel.onmouseout = function(){
timer = setInterval(rightBtnHandler,interval);
}
//右按钮的事件处理程序
function rightBtnHandler(){
//点击右按钮的时候，运动机构本身在运动，就不让右按钮有任何作用
if(m_unit.isanimated){console.log(m_unit.isanimated); return;}
nowimg ++;
changeCircle();
animate(m_unit,{"left":-width * nowimg},animatetime,tween,function(){
if(nowimg > imgLength - 1){
nowimg = 0;
this.style.left = "0px";
}
});
}
//左按钮的事件
leftBtn.onclick = function(){
//点击左按钮的时候，运动机构本身在运动，就不让右按钮有任何作用
if(m_unit.isanimated) return;
//左按钮的业务
nowimg--;
if(nowimg < 0){
nowimg = imgLength - 1;
m_unit.style.left = -width * imgLength + "px";
}
changeCircle();
animate(m_unit,{"left":-width * nowimg},animatetime,tween);
}
//批量添加小圆点的监听
for(var i = 0 ; i <= imgLength - 1 ; i++){
circlesLi[i].index = i; //先编号
circlesLi[i].onclick = function(){
//点击小圆点的时候，运动机构本身在运动，就不让右按钮有任何作用
if(m_unit.isanimated) return;
//小圆点的点击业务
nowimg = this.index;
animate(m_unit,{"left":-width * nowimg},animatetime,tween);
changeCircle();
}
}
//更换小圆点函数
function changeCircle(){
//n就是信号量的副本
var n = nowimg;
//判断副本的值如果是5，那么就是0
if(n == 5){
n = 0;
}
//去掉所有小圆点的cur
for (var i = 0; i < circlesLi.length; i++) {
circlesLi[i].className = "";
}
//第信号量这个小圆点加cur
circlesLi[n].className = "cur";
}
</script>
</body>
</html>
呼吸轮播(交叉淡入淡出轮播)
- 呼吸轮播一种是采用传统轮播加上改变透明度 opacity 得值。
- 第二种图片采用叠加。所有的 li 盒子绝对定位 opacity 为 0 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>呼吸轮播(交叉淡入淡出轮播)</title>
<style type="text/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;
}
</style>
</head>
<body>
<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><img src="images/0.jpg" alt="" /></a></li>
<li><a><img src="images/1.jpg" alt="" /></a></li>
<li><a><img src="images/2.jpg" alt="" /></a></li>
<li><a><img src="images/3.jpg" alt="" /></a></li>
<li><a><img src="images/4.jpg" alt="" /></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>
<script type="text/javascript" src="animate-2.0.1.js"></script>
<script type="text/javascript">
//得到carousel
var carousel = document.getElementById("carousel");
//得到li
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;
//滚动速度
var animatetime = 300;
//缓冲描述
var tween = "Linear";
//间隔时间
var interval = 2000;
var idx = 0;
//自动轮播
var timer = setInterval(rightBtnHandler,interval);
//鼠标进入停止
carousel.onmouseover = function(){
clearInterval(timer);
}
//鼠标离开开始
carousel.onmouseout = function(){
timer = setInterval(rightBtnHandler,interval);
}
//右按钮的监听
rightBtn.onclick = 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();
}
//左按钮的监听
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();
}
//批量添加小圆点的监听
for(var i = 0 ; i <= imgLength - 1 ; i++){
circlesLi[i].index = i; //先编号
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(){
//去掉所有小圆点的cur
for (var i = 0; i < circlesLi.length; i++) {
circlesLi[i].className = "";
}
//第信号量这个小圆点加cur
circlesLi[idx].className = "cur";
}
</script>
</body>
</html>
图片点击 bug
因为图片的透明度为 0，当点击图片总是点击最上面的。使用display:block/none 解决。思路就是：li 里面加none 显示的li 放 block ，老图回调函数放 none 新图先把透明度变为 0，再出现 display:block 完了。同时给左右按钮和小圆点添加就行了。
.carousel .imageList ul li{
position: absolute;
top: 0;
left: 0;
width: 560px;
height: 300px;
display: none; //新增
}
.carousel .imageList ul li.first{
opacity: 1;
display: block; //新增
}
leftBtn.onclick = function(){
//函数节流
if(imageLis[idx].isanimated) return;
//老图淡出
animate(imageLis[idx],{"opacity":0},options.animatetime,function(){
this.style.display = "none";
});
//信号量的变化
idx --;
if(idx < 0){
idx = imageLength - 1;
}
//新图淡入之前，先让新图显示，并且让新图瞬间把opacity置为0
imageLis[idx].style.display = "block";
imageLis[idx].style.opacity = "0";
imageLis[idx].style.filter = "alpha(opacity=0)";
animate(imageLis[idx],{"opacity":1},options.animatetime);
//设置小圆点
changeCircles();
}
呼吸轮播变种
给呼吸轮播的中间效果改变修改一下。采用回调函数，使出现的慢于消失的。
类似下面的代码
//右按钮的监听
rightBtn.onclick = function(){
//函数截流
if(lis[idx].isanimated) return;
//原来的信号量的图片淡出
animate(lis[idx],{"opacity" : 0},animatetime,function(){
//信号量改变
idx++;
if(idx > imgLength - 1){
idx = 0;
}
//新信号量的图片淡入
animate(lis[idx],{"opacity" : 1},animatetime);
changeCircle();
});
}
三位置轮播
传统轮播的“火车法”的问题是，小圆点点击的时候，拉动的图片，跳跃性大。
比如现在是0号图，点击3号小圆点，就会看见1号、2号，停留在3号图。不是平滑过渡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三位置轮播</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
border:none;
}
.carousel{
width: 560px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
.carousel .imageList ul{
list-style: none;
position: relative;
}
.carousel .imageList ul li{
position: absolute;
top: 0;
left: 560px;
width: 560px;
height: 300px;
}
.carousel .imageList ul li.first{
left: 0;
}
.btns a{
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
background-color: yellow;
z-index: 999;
}
.btns a.leftBtn{
left: 10px;
}
.btns a.rightBtn{
right: 10px;
}
.circles{
position: absolute;
bottom: 10px;
right: 10px;
width: 150px;
height: 18px;
}
.circles ol{
list-style: none;
}
.circles ol li{
float: left;
width: 18px;
height: 18px;
margin-right: 10px;
border-radius: 50%;
background-color: pink;
cursor: pointer;
}
.circles ol li.cur{
background-color: purple;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<div class="btns">
<a href="javascript:;" class="leftBtn" id="leftBtn"></a>
<a href="javascript:;" class="rightBtn" id="rightBtn"></a>
</div>
<div class="imageList" id="imageList">
<ul>
<li class="first"><a href="#"><img src="images/0.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="" /></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>
<script type="text/javascript" src="js/animate-2.0.1.js"></script>
<script type="text/javascript">
//得到元素
var carousel = document.getElementById("carousel");
var leftBtn = document.getElementById("leftBtn");
var rightBtn = document.getElementById("rightBtn");
var circles = document.getElementById("circles");
var imageList = document.getElementById("imageList");
var imageUL = imageList.getElementsByTagName("ul")[0];
var imageLis = imageUL.getElementsByTagName("li");
var circlesLis = circles.getElementsByTagName("li");
var idx = 0;
rightBtn.onclick = function(){
//节流
if(imageLis[idx].isanimated) return;
//原信号量的图片移动到-560
animate(imageLis[idx],{"left":-560},700,"QuadEaseOut");
//信号量改变
idx++;
if(idx > 4){
idx = 0;
}
//新信号量的这个图片先瞬移到560 standby等待
imageLis[idx].style.left = "520px";
//拉！新信号量运动
animate(imageLis[idx],{"left":0},700,"QuadEaseOut");
//改变小圆点
changeCircles();
}
leftBtn.onclick = function(){
//节流
if(imageLis[idx].isanimated) return;
//原信号量的图片移动到-560
animate(imageLis[idx],{"left":560},700,"QuadEaseOut");
//信号量改变
idx--;
if(idx < 0){
idx = 4;
}
//新信号量的这个图片先瞬移到-560 standby等待
imageLis[idx].style.left = "-520px";
//拉！新信号量运动
animate(imageLis[idx],{"left":0},700,"QuadEaseOut");
//改变小圆点
changeCircles();
}
//小圆点的监听
for (var i = 0; i < circlesLis.length; i++) {
circlesLis[i].index = i;
circlesLis[i].onclick = function(){
//节流
if(imageLis[idx].isanimated) return;
//判断点击的小圆点和当前的信号量的关系
if(this.index > idx){
//点的小圆点比信号量大，所以 ←←
animate(imageLis[idx],{"left":-560},700,"QuadEaseOut");
idx = this.index;
//新的信号量这个图，瞬移过来，就位，等待上场
imageLis[idx].style.left = "560px";
animate(imageLis[idx],{"left":0},700,"QuadEaseOut");
}else if(this.index < idx){
animate(imageLis[idx],{"left":560},700,"QuadEaseOut");
idx = this.index;
//新的信号量这个图，瞬移过来，就位，等待上场
imageLis[idx].style.left = "-560px";
animate(imageLis[idx],{"left":0},700,"QuadEaseOut");
}else{
alert("就是这个图，点个屁啊！");
}
changeCircles();
}
};
//根据信号量设置小圆点
function changeCircles(){
//排他
for (var i = 0; i < circlesLis.length; i++) {
circlesLis[i].className = "";
}
circlesLis[idx].className = "cur";
}
</script>
</body>
</html>
