Javascript图片轮播
原文链接：http://www.imooc.com/article/7393
编辑HTML代码：
<div id="wrap"><!--图片展示区--> <div id="inner" class="clear"><!--所有图片并排的块--> <a href="#"><img src="img/sw1.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw2.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw3.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw4.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw5.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw6.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw7.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw8.png" alt="图片已失效"/></a> <a href="#"><img src="img/sw1.png" alt="图片已失效"/></a> </div> <div id="pagination" class="pagination"><!--页面数字按钮区域--> <span class="selected">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> </div> <div id="left" class="arrow"> <<< </div> <div id="right" class="arrow"> >>> </div> </div><!--wrap end-->
定义样式：
<style type="text/css"> *{ margin: 0; padding: 0; border: 0; } #wrap{/*整个轮播区域只会显示一张图片大小的空间，其余图片隐藏*/ width: 720px;/*图片宽度*/ height: 322px;/*图片高度*/ margin: 0 auto;/*水平居中*/ position: relative; background: lightpink; overflow: hidden; } .clear{/*兼容IE*/ zoom: 1; } .clear:after{ visibility: none; content: ""; display: block; clear: both; height: 0;/*why？*/ } #inner{ width: 1000%;/*why？*/ height: 100%; position: absolute; left: 0; top: 0; } #inner img{ width: 10%; float: left; } .pagination{/*页码的样式和摆放*/ width: 100%; position: absolute; bottom: 10px; text-align: center; } .pagination span{ padding: 5px 8px; background: green; color: aliceblue; border-radius: 50%;/*设置数字按钮边框圆角*/ cursor: pointer; } .pagination .selected{/*第一个页码的数字按钮样式*/ background: blue; color: chartreuse; } .arrow{ position: absolute; top: 0; width: 35px; height: 322px;/*图片高度*/ line-height: 322px; text-align: center; color: black; cursor: pointer; } #right{ right: 0; } .arrow:hover{ background: rgba(0,0,0,0.5); } </style>
Javascript代码：
<script type="text/javascript">
var wrap = document.getElementById("wrap");//获取要轮播的DIV
var inner = document.getElementById("inner");//获取轮播图并排的块
//获取pagination的子字节数字按钮
var spanList = document.getElementById("pagination").getElementsByTagName("span");
var left = document.getElementById("left");//获取往左箭头
var right = document.getElementById("right");//获取往右箭头
var clickFlag = true;//防止左右按钮的连续操作
var motive;//用来设置自动往左滑动的计时器
var index = 0;//记录每次滑动图片的下角标
var Distance = wrap.offsetWidth;//获取展示区的宽度（图片宽度）
function AutoGo(){//定义图片滑动的函数
var start = inner.offsetLeft;//获取移动块当前left的坐标
var end = index * Distance * (-1);//获取移动块结束后的坐标（下角标*图片宽度*每次向左移动的一个宽度）
var change = end - start;//偏移量（x轴结束后的坐标减去当前left的坐标等于往左偏移的像素数）
var motiver;//给图片添加轮播效果的间隔型定时器
var miniT = 0;
var maxT = 30;//最长时间，每30毫秒让块往左移动
clear();//先将按钮状态清除，再让对应的按钮改变状态
if(index == spanList.length){//if语句判断下角标是否等同于数字按钮的长度
spanList[0].className = "selected";//className返回元素的class属性，子节点下角标为0时返回selected
}else{
spanList[index].className = "selected";
}
clearInterval(motiver);//在开启定时器之前先将之前的清除
motiver = setInterval(function(){
miniT++;
if(miniT >= maxT){
clearInterval(motiver);//当图片到达终点时清除间隔型定时器
clickFlag = true;//当图片到达终点时才能点击方向按钮切换图片
}
//每隔多少毫秒（对应下列括号内的数值）往左偏移 = 偏移量/最长时间*最短时间 + X轴往左滑动的像素数
inner.style.left = change / maxT * miniT + start + "px";
//如果满足下角标等同于子节点长度，以及最短时间大于等于最长时间的条件时，
if(index == spanList.length && miniT >= maxT){
inner.style.left = 0;
//当图片到达最后一张时让它瞬间切换回第一张，由于都是用的都是第一张图片所以不会影响效果
index = 0;
}
},20);
}
//定义图片往右滑动的函数
function forward(){
index++;
if(index > spanList.length){//当图片下角标到达最后一张时记录滑动图片的下角标为0
index = 0;
}
AutoGo();
}
//定义图片往左滑动函数
function backward(){
index--;
//当图片下角标到达第一张时，让它返回到倒数第二张，left的值要变为最后一张时才不会影响效果
if(index < 0){
index = spanList.length - 1;
inner.style.left = (index + 1) * Distance * (-1) + "px";
}
AutoGo();
}
//开启图片自动向右滑动的计时器，间隔多少毫秒切换一次图片，即一张图片停留时间为多少毫秒
motive = setInterval(forward,2000);
//设置鼠标悬停时清除定时器，轮播暂停
wrap.onmouseover = function(){
clearInterval(motive);
}
wrap.onmouseout = function(){
motive = setInterval(forward,2000);
}
//遍历每个数字按钮让其切换到对应的图片
for(var i=0;i<spanList.length;i++){
spanList[i].onclick=function(){
//innerText用来定义数字按钮输出的文本
index = this.innerText - 1;//图片点击后下角标可以返回对应的图片，例如第4张是[3] = this.innerText -1;
AutoGo();
}
}
left.onclick=function(){
if(clickFlag){
backward();
}
clickFlag = false;
}
right.onclick=function(){
if(clickFlag){
forward();
}
clickFlag = false;
}
//清除所有页面按钮状态颜色，只有当图片轮播时才能改变对应的按钮效果
function clear(){
for(var i=0;i < spanList.length;i++){
spanList[i].className = "";
}
}
</script>
