原生js之注释很多的轮播图
ps:花了好大的劲，终于搞懂了轮播图无缝切换的原理，这里要吐槽两点，首先吐槽这个轮播图对于新手来说有点难哦，之前很轻松写了一个轮播切换图，但后来发现图片轮播的时候首尾不衔接，当滑到最后一张的时候，会重新返回到第一张从新开始，非常不美观，后来百度才知道，很多人都遇到了这个坎，哈哈...后来，后来我就再也笑不起来了，因为从昨天下午一点就开始研究如何实现首尾无缝衔接，研究到了晚上九点多，虽然在网上找到了很多例子，但是还是没有完全搞明白轮播图，嗯，简单地说就是人家代码我看不懂（好尴尬啊），所以这里就要吐槽第二点了，为什么不多加点注释？当然也怪自己不自量力，DOM还没学完，就想着各种炫酷的东西了，不过好在皇天不负有心人，在十点多的时候，终于有了一些眉目，一看时间，我的天！然后赶紧洗了澡吃了泡面上床睡觉。。。今天早上又继续研究了一下，到现在才算弄懂了。现在把这个惨痛的成果给大家分享，当然，里面的注释那不是一般的多，因为看不懂真的让人抓狂啊，别问我怎么知道的。。。
首先要讲的就是思路，由于本人还是新手，所以写的可能过于简单详细啰嗦，大神路过请忽略。。
- 创建一个div，在div里创建一个ul，把所有的图片（5张）放入ul的li中，将ul绝对定位，div相对定位，然后通过操作定位的ul控制图片的滑动
- 在div里创建一个ol，把所有的按钮放入li中，然后通过操作按钮（获取下标）控制ul定位的偏移量，从而控制图片滑动
- 点击按钮的下标乘以图片的宽度就是要偏移的量
- 在div里创建两个div，分别是上一张图片按钮和下一张图片按钮
- 复制第一张图片放在最后一张图片的后面，用户每点击一次左右按钮，图片就会向左或向右滑动400px(图片的宽度)，即ul定位的偏移量为400，当图片滑到最后一张的时候，继续滑动，这时会滑动到复制的第一张上面，这时ul已经偏移了2000px，然后将ul的偏移量改为0，就会回到最初的样子（这个过程用户看不到），这样就实现了图片从最后一张无缝衔接到第一张，第一张无缝衔接到最后一张也是这个原理
实现代码如下：
首先是html代码
<body>
<div class="out">
<ul class="one" id="ul">
<li><img src="../images/1.jpg" alt="" /></li>
<li><img src="../images/2.jpg" alt="" /></li>
<li><img src="../images/3.jpg" alt="" /></li>
<li><img src="../images/4.jpg" alt="" /></li>
<li><img src="../images/5.jpg" alt="" /></li>
<li><img src="../images/1.jpg" alt="" /></li>
</ul>
<ol class="two">
<li οnclick="clc(this)" class="on">1</li>
<li οnclick="clc(this)">2</li>
<li οnclick="clc(this)">3</li>
<li οnclick="clc(this)">4</li>
<li οnclick="clc(this)">5</li>
</ol>
<div class="left" οnclick="button(this)"><</div>
<div class="right"οnclick="button(this)">></div>
</div>
</body>
<style type="text/css">
*{margin:0;padding:0;}
.out{width:400px;height:200px;margin:200px 200px;border:1px solid red;overflow:hidden;position:relative;}
ul{width:2800px;position:absolute;left:0px;top:0px;}
ul li,ol li{float:left;list-style:none;}
ul li img{width:400px;height:200px;}
ol{position:absolute;left:40%;bottom:5px;}
ol li{margin-left:10px;background:#00aeff;border-radius:50%;padding:5px 10px;color:#fff;font-size:14px;cursor:pointer;}
div.left,.right{position:absolute;top:35%;font-size:50px;color:#fff;background:#00aeff;cursor:pointer;}
.left{left:-5px;}
.right{right:-5px;}
.on{background:#ffaeff;}
</style><script type="text/javascript">
var index=0;//创建全局变量，也就是要获取的当前按钮的下标
var ul=document.getElementsByClassName("one")[0]//获取html中的ul,之后通过操作ul来改变图片的位置
var li=document.getElementsByClassName("two")[0];//获取html中的ol
var lis=li.children;//获取ol之后，需要获取ol里面的li,存入lis数组中，这样通过lis[i]就可以获取或者操作按钮的下标
var prevBtn = document.getElementById("left");//获取左边按钮，进行上一张图片切换
var nextBtn = document.getElementById("right");//获取右边按钮，进行下一张切换
var timer = 0;
var timer1 = 0;//-创建全局变量，用来存时间函数setInterval的值
//这里用到了setInterval和clearInterval，简单介绍一下，setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。//setInterval()方法会不停地调用函数，直到 clearInterval()被调用才会停止，
//由setInterval()返回的值可用作 clearInterval() 方法的参数。
//也就是说，在本代码中，clearInterval(timer1)可用于暂停setInterval();不懂的可以去百度学习一下。
function clc(li){//clc函数用于获取当前按钮的下标，然后传给tab函数，进行图片切换
for(var i=0;i<lis.length;i++){
if(lis[i]==li){
index=i;
tab();
}
}
}
function tab() {//图片切换动画函数
var start = ul.offsetLeft;//获取ul盒子的左边与父元素盒子左边的距离，可以理解为当前ul定位left的偏移量
var end = - 400 * index;//获取当点击按钮之后，left需要偏移的距离（这里的400的值是每张图片的宽度）
var change = end - start;//实际left变化的距离
var t = 0;//创建变量t用于实现图片切换的过渡效果
var maxT = 80;//创建t的最大值，当t变为maxT时，图片切换完毕
for(var j = 0; j < lis.length; j++) {
lis[j].className = "";//清空按钮的类名，用于重置高亮按钮
}
if(index >= lis.length) {
lis[0].className = "on";//如果高亮按钮进行到最后一个，那么下一个高亮按钮从第一个开始
}else {
lis[index].style.transition=".3s ease-in-out";//按钮切换的过渡效果
lis[index].className = "on";//如果高亮按钮没有进行到最后一个，则为当前按钮高亮显示
}
clearInterval(timer1);//每一次切换图片前对之前动画暂停，如果不加这一句，则快速切换按钮的时候，
//动画会一直进行下去，也就是崩溃了。
timer1 = setInterval(function() {//每10毫秒执行一次函数
t++;//每次t加一，不用transition过渡也会有过渡效果
if(t >= maxT) {//如果t达到最大值，图片切换完毕
clearInterval(timer1);//暂停动画,如果不加这一句，那么只要点击切换按钮动画就会一直动下去
}
ul.style.left =change/maxT*t+start+"px";
//每10毫秒移动相对于当前位置的change/maxT*t个距离，如此循环达到动画效果，如果不加start
//的距离，则每次切换图片都会从最初的位置滑动
if(index == (lis.length) && t >= maxT) {
//当图片滑到最后一张时，将整个ul定位的left的值改为最初的样子，这样就达到了图片尾首循环 //，这里t >= maxT必须要加上，否则会在动画还没结束就跳到第一张，则没有了无缝衔接的效果
ul.style.left = 0;//left改为原来的样子
}
},10);//每10毫秒调用函数
}
function button(btn){//获取用户点击的是上一张还是下一张
var active=btn.innerHTML;//获取按钮里面的值
if(active=="<"){//判断用户点击的是上一张还是下一张
//clearInterval(timer);//不加也行
prev();
}else{
//clearInterval(timer);//不加也行
next();
}
}
function prev() {//上一张图片切换函数
index--;//每点击一次上一张按钮，按钮下标减一
if(index < 0 ) {//如果滑到第一张图片，则将整个ul定位的left改为最后一张图片的位置，这样达到首尾循环
index = lis.length - 1;
ul.style.left = - lis.length *400 + "px";
}
tab();
}
function next() {//下一张图片切换函数
index++;
if(index > lis.length) {
index = 1;
}
tab();
}
function xunhuan(){//自动轮播函数
index++;
if(index>lis.length){
index=1;
}
// ul.style.left = - 400 * index + "px";
tab();
}
var out=ul.parentNode;//获取ul的父元素，out
var timer =setInterval(xunhuan,2000);//每两秒调用自动轮播函数
out.onmouseover =function(){//当鼠标悬浮out上面，自动轮播函数停止
clearInterval(timer);
}
out.onmouseout =function(){//当鼠标离开，自动轮播函数继续
timer = setInterval(xunhuan,2000);
}
</script>昨天看到一句话，现在的你由五年前的你决定，而五年后的你将由现在的你决定，加油！共勉之！
2543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
