说一下思路：和我上一篇博客中用JQ去写的轮播图有相同点和不同点
相同点：
- 首先页面布局是一样的
- 同样是改变.inner盒子的位置去显示不同的图片
不同点：
- 为了实现无限滚动需要多添加两张重复的图片
- 左右切换和前面的方法有所不同，前面是获取当前的索引值乘以-600px当做位移距离，现在是需要获取当前.inner的位置来加上或者减去-600来实现
下面来一步步的去实现轮播图：
首先是html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
position: absolute;
bottom: 0;
left: 175px;
}
ul li{
float: left;
}
ul li a{
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffbeaa;
margin-left: 5px;
opacity: 0.6;
}
ul li a.active{
background-color: red;
}
.inner{
width: 4200px;
height: 400px;
position: absolute;
}
.inner img{
display: block;
float: left;
}
.pic{
height: 400px;
width: 600px;
overflow: hidden;
position: relative;
}
.prev,.next{
position: absolute;
top: 190px;
opacity: 0.6;
}
.next{
right: 0;
}
</style>
<script> </script>
</head>
<body>
<div class="pic" id="pic">
<div class="inner" id="inner" style="left:-600px;">
<img src="img/5.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/1.jpg" alt="">
</div>
<ul id="ul">
<li><a href="#" class="active" id="1"></a></li>
<li><a href="#" id="2"></a></li>
<li><a href="#" id="3"></a></li>
<li><a href="#" id="4"></a></li>
<li><a href="#" id="5"></a></li>
</ul>
<a href="#" class="prev" id="prev"><img src="img/slider-prev.png" alt=""></a>
<a href="#" class="next" id="next"><img src="img/slider-next.png" alt=""></a>
</div>
</body>
</html>
第一步添加左右点击切换：
<script>
//文档加载完毕后执行函数
window.onload=function(){
var pic = document.getElementById("pic");
var inner = document.getElementById("inner");
var li = document.getElementById("ul").getElementsByTagName("a");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
//设置索引初始值，点击自增或者自减，根据index值来给按钮添加颜色
var index = 1;
//左点击事件
prev.onclick = function(){
//调用动画函数，传入正的600，为每次的偏移量
animate(600);
//设置索引的范围，不能小于1
if(index==1){
index=5;
}else{
index--;
}
//调用添加颜色函数
showButton();
}
//右点击事件
next.onclick = function(){
//调用动画函数，传入负的600，为每次的偏移量
animate(-600);
//设置索引的范围，不能超过5
if(index==5){
index=1;
}else{
index++;
}
showButton();
}
//动画函数，offset参数为偏移量
function animate(offset){
//获取现在.inner盒子的位置加上偏移量 赋值 给.inner盒子
inner.style.left = parseInt(inner.style.left) + offset + "px";
//判断新的位置，如果小于-3000则变为-600px，如果大于-600则变为-3000px
if(parseInt(inner.style.left) < -3000){
inner.style.left = -600 + "px";
}
if(parseInt(inner.style.left) > -600){
inner.style.left = -3000 + "px";
}
}
//按钮添加颜色函数
function showButton(){
//遍历每个a元素，如果有active类 则替换为空字符串，也就是移除这个类
for(var i=0;i<li.length;i++){
if(li[i].className=="active"){
li[i].className="";
//移除后就没必要去循环了，做一个优化。
break;
}
}
//根据当前的index值，找到对应的a元素添加active类
li[index-1].className="active";
}
}
</script>
需要注意的地方：
- 执行完毕inner.style.left = parseInt(inner.style.left) + offset + "px"; 后 inner.style.left的值为新位置的值，后面的判断需要用新的值去判断
- index的值为1-5，做成a元素的下标时需要 index-1
- 注意调用的showButton函数的位置，需要在得到index的值的后调用
- 需要给.inner盒子添加行内样式 style="left:-600px;",不添加出现inner.style.left获取不到值的情况
- 获取a元素不能 var li = document.getElementById("ul").getElementsByTagName("li").getElementsByTagName("a");去获取，因为getElementsByTagName("li")获取的是一个包含5个li的数组，需要加索引值，比如var li = document.getElementById("ul").getElementsByTagName("li")[0].getElementsByTagName("a");
第二步：添加五个按钮切换
<script>
//文档加载完毕后执行函数
window.onload=function(){
var pic = document.getElementById("pic");
var inner = document.getElementById("inner");
var li = document.getElementById("ul").getElementsByTagName("a");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
//设置索引初始值，点击自增或者自减，根据index值来给按钮添加颜色
var index = 1;
//左点击事件
prev.onclick = function(){
//调用动画函数，传入正的600，为每次的偏移量
animate(600);
//设置索引的范围，不能小于1
if(index==1){
index=5;
}else{
index--;
}
//调用添加颜色函数
showButton();
}
//右点击事件
next.onclick = function(){
//调用动画函数，传入负的600，为每次的偏移量
animate(-600);
//设置索引的范围，不能超过5
if(index==5){
index=1;
}else{
index++;
}
showButton();
}
//动画函数，offset参数为偏移量
function animate(offset){
//获取现在.inner盒子的位置加上偏移量 赋值 给.inner盒子
inner.style.left = parseInt(inner.style.left) + offset + "px";
//判断新的位置，如果小于-3000则变为-600px，如果大于-600则变为-3000px
if(parseInt(inner.style.left) < -3000){
inner.style.left = -600 + "px";
}
if(parseInt(inner.style.left) > -600){
inner.style.left = -3000 + "px";
}
}
//按钮添加颜色函数
function showButton(){
//遍历每个a元素，如果有active类 则替换为空字符串，也就是移除这个类
for(var i=0;i<li.length;i++){
if(li[i].className=="active"){
li[i].className="";
//移除后就没必要去循环了，做一个优化。
break;
}
}
//根据当前的index值，找到对应的a元素添加active类
li[index-1].className="active";
}
//遍历五个按钮
for(var i=0;i<li.length;i++){
//给五个按钮添加点击事件
li[i].onclick=function(){
//获取当前的id值
var id = parseInt(this.getAttribute("id"));
//减去原来的index值，乘以-600 得到偏移量，调用偏移函数
var offset = (id-index) * -600;
//调用偏移函数
animate(offset);
//把index的值更新
index = id;
//调用改变背景色函数
showButton();
}
}
}
</script>
需要注意：
- 第72行 index = id 把index的值更新为当前的索引index。
- 因为id属性不是HTML自带的属性。不能li.style.id 这样去获取,而是使用getAttribute("id")方法，这个方法HTML自带属性和自定义属性都能获取
第三步：添加animate函数添加动画函数
<script>
window.onload=function(){
var pic = document.getElementById("pic");
var inner = document.getElementById("inner");
var li = document.getElementById("ul").getElementsByTagName("a");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var index = 1;
//通过state的状态 来判断是否执行animate函数
var state = false;
prev.onclick = function(){
//如果state=false 代表动画函数没有执行完毕，则此次点击无效
if(state){
return;
}
animate(600);
if(index==1){
index=5;
}else{
index--;
}
showButton();
}
next.onclick = function(){
//如果state=false 代表动画函数没有执行完毕，则此次点击无效
if(state){
return;
}
animate(-600);
if(index==5){
index=1;
}else{
index++;
}
showButton();
} function animate(offset){
//调用animate函数后 state的值变为true
state = true;
//动画执行总的时间
var time = 300;
//每次位移的间隔时间
var interval = 10;
//每次位移量
var speed = offset/(time/interval); var newLeft = parseInt(inner.style.left) + offset;
//动画函数
function go(){
if((speed < 0 && parseInt(inner.style.left) > newLeft) || (speed > 0 && parseInt(inner.style.left) < newLeft)){
inner.style.left = parseInt(inner.style.left) + speed + "px";
//通过延时定时器不断的去调用自身go函数。直到达到目标位置
setTimeout(go,interval);
}else{
//达到目标位置后 state 状态变为 false
state = false;
//跟新.inner盒子的值为目标的位置
inner.style.left = newLeft + "px";
//盒子到达目标位置后做一个判断，如果跑到假的第一张图和第五张图上时，马上瞬间跑到真正的第一张图或者第五张图
if(parseInt(inner.style.left) < -3000){
inner.style.left = -600 + "px";
}
if(parseInt(inner.style.left) > -600){
inner.style.left = -3000 + "px";
}
}
}
go(); }
function showButton(){
for(var i=0;i<li.length;i++){
if(li[i].className=="active"){
li[i].className="";
break;
}
}
li[index-1].className="active";
}
for(var i=0;i<li.length;i++){
li[i].onclick=function(){
var id = parseInt(this.getAttribute("id"));
var offset = (id-index) * -600;
//如果state=false 代表动画函数没有执行完毕，则此次点击无效
if(state){
return;
}
animate(offset);
index = id;
showButton();
}
}
}
做这个go函数我觉得是这个轮播图中最难的点，我经常有地方转不过弯来。
需要注意的地方：
- 每次位移一小段距离，终点怎么去判断，也就是什么时候会停止，.inner盒子只能往左边或者右边移动，点击next按钮 .inner往左边移动，是添加一个负值距离，点击prev按钮 .inner往右移动,是添加一个正的left距离 第52行判断条件的意思是，如果speed小于0，获取当前.inner盒子的left的值与目标newLeft值比较 如果大于他则不停的去加上-speed去变小 与newLeft相同为止 或者speed大于0，获取当前.inner盒子的left的值与目标newLeft值比较 如果小于他则不停的去加上speed去变大 与 newLeft相同为止。
- newLeft = parseInt(inner.style.left) + offset; 表示最终目标值，存进了变量newLeft中，下面inner.style.left获取的都是现在的left值
- go函数里面用的是setTimeout()来递归，通过判断条件，来递归go函数。开始我用的是setInterval()方法，导致出现了奇异的动画效果，思路错了,应该在if前面添加一个clearInterval()清除方法，因为如果不清除的话会不断的调用go函数，导致go函数永远都不会结束，就导致了画面狂闪现象。 setTimeout()方法是在什么时间以后干什么，干完拉倒。setInterval()不停的去调用函数，直到clearInterval()被调用或者窗口被关闭。
- 注意第70行,写完go函数后需要调用他才会执行。
第四步：最终版，添加自动轮播效果
<script>
window.onload=function(){
var pic = document.getElementById("pic");
var inner = document.getElementById("inner");
var li = document.getElementById("ul").getElementsByTagName("a");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var index = 1;
var timer = null;
//设置一个变量来存放自动轮播定时器
var timer2 = null;
var state = false;
prev.onclick = function(){
if(state){
return;
}
animate(600);
if(index==1){
index=5;
}else{
index--;
}
showButton();
}
next.onclick = function(){
if(state){
return;
}
animate(-600);
if(index==5){
index=1;
}else{
index++;
}
showButton();
} function animate(offset){
state = true;
var time = 300;
var interval = 10;
var speed = offset/(time/interval); var newLeft = parseInt(inner.style.left) + offset;
function go(){
clearInterval(timer);
if((speed < 0 && parseInt(inner.style.left) > newLeft) || (speed > 0 && parseInt(inner.style.left) < newLeft)){
inner.style.left = parseInt(inner.style.left) + speed + "px";
timer=setInterval(go,interval);
}else{
state = false;
inner.style.left = newLeft + "px";
if(parseInt(inner.style.left) < -3000){
inner.style.left = -600 + "px";
}
if(parseInt(inner.style.left) > -600){
inner.style.left = -3000 + "px";
}
}
}
go(); }
function showButton(){
for(var i=0;i<li.length;i++){
if(li[i].className=="active"){
li[i].className="";
break;
}
}
li[index-1].className="active";
}
for(var i=0;i<li.length;i++){
li[i].onclick=function(){
var id = parseInt(this.getAttribute("id"));
var offset = (id-index) * -600;
if(state){
return;
}
animate(offset);
index = id;
showButton();
}
}
//通过定时器来不断的点击 next按钮 来实现轮播效果.
function play(){
timer2 = setInterval(function(){
next.onclick();
},3000);
}
//停止轮播函数，清除定时器
function stop(){
clearInterval(timer2);
}
//给.pic添加移进悬浮和移出事件
pic.onmouseover = stop;
pic.onmouseout = play;
//第一次访问页面开始轮播
play();
}
</script>
需要注意的地方:
- 触发next的点击事件，可以写成next.onclick()来触发
- 给.pic添加事件 不能写成pic.onmouseover = stop(),加了括号后代表立即调用函数，而不是我们需要的悬浮在pic盒子上时调用.
总结：第一次学习这个轮播图时，因为思路跟不上，导致看不懂，然后我又从简单的做起，比如我先学习做了一个自动轮播标签页（前面博客有总结），然后又学习用jq写了一个简单的轮播图，再过来学习这个难度大的，循序渐进去学习，就会发现自己能懂甚至写出来这个轮播图了，附上我学习的视频链接地址。
标签切换地址:http://www.imooc.com/learn/176
JQ轮播图地址：http://www.cnblogs.com/yewenxiang/p/6100206.html
原生js轮播图地址：http://www.imooc.com/learn/176
这篇博客是我目前写的最长的一篇，时间跨度两天，中间多有疏漏或者不正确的地方还希望能指出，我改正。