原生javascript之实战 轮播图

成品效果如下图所示：

因为博客园限制图片上传大小被我删了一些帧数，所以图片看起来会有一点卡，现实运行是不会的

搭建HTML和CSS结构

HTML代码如下：

 <div class="wrapper">
         <ul class="sliderPage">
             <li>
                 <img src="data:images/1.jpg">
             </li>
             <li>
                 <img src="data:images/2.jpg">
             </li>
             <li>
                 <img src="data:images/3.jpg">
             </li>
             <li>
                 <img src="data:images/1.jpg">
             </li>
         </ul>
         <div class="btn leftBtn">&lt;</div>
         <div class="btn rightBtn">&gt;</div>
         <div class="sliderIndex">
             <span class="active"></span>
             <span></span>
             <span></span>
         </div>
     </div>

CSS代码如下：

 * {
             padding: 0px;
             margin: 0px;
             list-style: none;
         }

         .wrapper {
             margin: 50px auto 0px;
             width: 480px;
             height: 640px;
             overflow: hidden;
             position: relative;
         }

         .wrapper .sliderPage {
             height: 640px;
             width: 2400px;
             position: absolute;
             left: 0px;
             top: 0px;
         }

         .wrapper .sliderPage li {
             width: 480px;
             height: 640px;
             float: left;
         }

         .wrapper .sliderPage li img {
             width: 100%;
             height: 100%;
         }

         .wrapper .btn {
             position: absolute;
             top: 50%;
             margin-top: -20px;
             width: 40px;
             height: 40px;
             color: #fff;
             background-color: #000;
             text-align: center;
             line-height: 40px;
             opacity: 0.3;
             cursor: pointer;
         }

         .wrapper:hover .btn {
             opacity: 0.7;
         }

         .wrapper .leftBtn {
             left: 15px;
         }

         .wrapper .rightBtn {
             right: 15px;
         }

         .wrapper .sliderIndex {
             position: absolute;
             width: 100%;
             bottom: 15px;
             text-align: center;
         }

         .wrapper .sliderIndex span {
             display: inline-block;
             width: 8px;
             height: 8px;
             background-color: #ccc;
             border-radius: 50%;
             margin-right: 10px;
             cursor: pointer;
         }

         .wrapper .sliderIndex .active {
             background-color: #f40;
         }

搭建好后的效果如下：

传入（调用写好的运动函数）

 //获取样式
         function getStyle(dom, attr) {
             if (window.getComputedStyle) {
                 return window.getComputedStyle(dom, null)[attr];
             } else {
                 return dom.currentStyle[attr];
             }
         }

         //运动函数
         function startMove(dom, attr, func) {
             clearInterval(dom.timer);
             var iSpeed = null, //速度
                 iCur = null;  //当前值
             dom.timer = setInterval(function () {
                 for (var i in attr) {
                     if (i == 'opacity') { //判断是否为 透明 属性，是的话，特殊处理；
                         iCur = parseFloat(getStyle(dom, i)) * 100;
                     } else {
                         iCur = parseInt(getStyle(dom, i));
                     }
                     iSpeed = (attr[i] - iCur) / 7;
                     iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  

                     if (i == 'opacity') {
                         dom.style.opacity = (iCur + iSpeed) / 100;
                     } else {
                         dom.style[i] = iCur + iSpeed + 'px';
                     }
                     if (iCur == attr[i]) {
                         clearInterval(dom.timer);
                         func();
                     }
                 }
             }, 30)
         }

开始写轮播图代码

　　

         var timer = null;
         var sliderPage = document.getElementsByClassName('sliderPage')[0];
         var moveWidth = sliderPage.children[0].offsetWidth;   //sliderPage的子节点第n位的width等于movewidth
         var num = sliderPage.children.length - 1;  //li的长度减去1，相当于4-1=3；刚好到了第三张也就是最后一张
         var leftBtn = document.getElementsByClassName('leftBtn')[0]; // 获取左按钮事件
         var rightBtn = document.getElementsByClassName('rightBtn')[0];    //获取右按钮事件
         var lock = true;  //设置一个锁使定时器不发生冲突，true的时候可以进入，false就把锁锁上；
                           //相当于一个厕所，很多人在排队， 没进入前等于true，第一个进去之后把锁锁上(也就是等于false)这样别人就进不去，
                           //出来的时候把锁打开(也就是等于true)方便下一个进入

         var index = 0; //小圆点初始值等于0
         var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');//选出sliderIndex下面的所有span标签

         // 点击向左
         leftBtn.onclick = function () {
             autoMove('right->left');   //当点击leftBtn的时候传入'right->left'这个实参
         }

         // 点击向右
         rightBtn.onclick = function () {
             autoMove('left->right');   //当点击rightBtn的时候传入'left->right'这个实参
         }

         //点击小圆点跳转至相应的图片和小圆点位置
         for (var i = 0; i < oSpanArray.length; i++) {   //先循环拿到3个span标签，也就是每个小圆点的位置
             (function (myIndex) {
                 oSpanArray[i].onclick = function () { //给每一个小圆点注册一个点击事件
                     lock = false;  //点击后关闭锁，防止没执行完再次运行点击事件
                     clearInterval(timer); //清理定时器，防止没执行完再次开启定时器
                     index = myIndex; //myIndex和i形参实参相统一，myIndex付给index
                     startMove(sliderPage,{ left: - index * moveWidth }, //执行函数让sliderPage(也就是ul)移动

                               function () { //再执行回调函数
                                 lock = true; //执行完再次开启锁，方便下次开启点击事件
                                 timer = setInterval(autoMove, 1500); //开启定时器，让图片继续运动
                                 changeIndex(index); //执行小圆点函数，让小圆点每次点击同步
                     })
                 }
             })(i)
         }

         function autoMove(dierction) {  // 函数形参传入dierction

             if (lock) {  //lock = true时进入判断
                 lock = false;   //进来后等于false，判断之后再次开启锁
                 clearInterval(timer);  // 每次进入autoMove函数的时候立即关闭定时器，执行下面代码之后再次开启定时器。
                                         // 相当于执行一次轮播一张图片之后再次开启一次定时器，再次轮播一张图片，无限循环。
                 if (!dierction || dierction == 'left->right') {     //不传入参数时dierction等于undefined !undfined时等于true，进入if语句。
                                                                     //点击左右函数的时候传入实参
                     index++; //小圆点位置每次加1
                     startMove(sliderPage,{ left: sliderPage.offsetLeft - moveWidth },  //执行函数startMove,sliderPage里面left当前值减去li的宽度，所以图片移动
                              function () {  //再执行回调函数
                                 if (parseInt(getStyle(sliderPage, 'left')) == -num * moveWidth) {  // 判断当前left的值是否等于最后一个，也就是到了最后一张图片
                                     index = 0; // 当到了最后一张的时候，小圆点跳转到第一张，小圆点下角标为0，也就是等于第一张图片。
                                     sliderPage.style.left = '0px';  // 如果等于到了最后一张图片的话，就当前left值等于0。 === 回到第一张图片
                                 }
                                 timer = setInterval(autoMove, 1500);  // 每次执行结束之后再次开启定时器
                                 lock = true; //出去前等于true，方便下次进入，使定时器不会发生冲突同时运行多个定时器
                                 changeIndex(index); //执行小圆点
                         });

                 } else if (dierction == 'right->left') { //当点击right按钮后实参传入'right->left',进入if语句执行以下代码
                     if (sliderPage.offsetLeft == 0) {  //如果开始执行的时候当前位置等于0
                         sliderPage.style.left = - num * moveWidth + 'px';  //那就把最后一张的位置付给他，让他跳转至最后一张
                         index = num;   //如果刚开始的时候，当前位置等于0点击向left那么跳转到最后一张图片的位置，所以直接index的下角标直接等于最后一张的位置
                     }
                     index--;  //小圆点位置每次减1
                     startMove(sliderPage,{ left: sliderPage.offsetLeft + moveWidth },
                             function () {
                             timer = setInterval(autoMove, 1500); //每次执行之后再次开启定时器
                             lock = true; //出去前等于true，方便下次进入，使定时器不会发生冲突同时运行多个定时器
                             changeIndex(index); //执行小圆点
                         })
                 }
             }
         }
         function changeIndex(_index) {
             for (var i = 0; i < oSpanArray.length; i++) {
                 oSpanArray[i].className = ''; //循环小圆点让每个位置的classname等于空
             }
             oSpanArray[_index].className = 'active'; //因为原始值是0，所以第一个有classname样式，每次index加数，下角标改变时classname也同步改变
         }
         timer = setInterval(autoMove, 1500); // 设置一个定时器，每1500毫秒运行一次autoMove函数