原生javascript之实战 轮播图
成品效果如下图所示：
因为博客园限制图片上传大小被我删了一些帧数，所以图片看起来会有一点卡，现实运行是不会的
搭建HTML和CSS结构
HTML代码如下：
1 <div class="wrapper"> 2 <ul class="sliderPage"> 3 <li> 4 <img src="images/1.jpg"> 5 </li> 6 <li> 7 <img src="images/2.jpg"> 8 </li> 9 <li> 10 <img src="images/3.jpg"> 11 </li> 12 <li> 13 <img src="images/1.jpg"> 14 </li> 15 </ul> 16 <div class="btn leftBtn"><</div> 17 <div class="btn rightBtn">></div> 18 <div class="sliderIndex"> 19 <span class="active"></span> 20 <span></span> 21 <span></span> 22 </div> 23 </div>
CSS代码如下：
1 * { 2 padding: 0px; 3 margin: 0px; 4 list-style: none; 5 } 6 7 .wrapper { 8 margin: 50px auto 0px; 9 width: 480px; 10 height: 640px; 11 overflow: hidden; 12 position: relative; 13 } 14 15 .wrapper .sliderPage { 16 height: 640px; 17 width: 2400px; 18 position: absolute; 19 left: 0px; 20 top: 0px; 21 } 22 23 .wrapper .sliderPage li { 24 width: 480px; 25 height: 640px; 26 float: left; 27 } 28 29 .wrapper .sliderPage li img { 30 width: 100%; 31 height: 100%; 32 } 33 34 .wrapper .btn { 35 position: absolute; 36 top: 50%; 37 margin-top: -20px; 38 width: 40px; 39 height: 40px; 40 color: #fff; 41 background-color: #000; 42 text-align: center; 43 line-height: 40px; 44 opacity: 0.3; 45 cursor: pointer; 46 } 47 48 .wrapper:hover .btn { 49 opacity: 0.7; 50 } 51 52 .wrapper .leftBtn { 53 left: 15px; 54 } 55 56 .wrapper .rightBtn { 57 right: 15px; 58 } 59 60 .wrapper .sliderIndex { 61 position: absolute; 62 width: 100%; 63 bottom: 15px; 64 text-align: center; 65 } 66 67 .wrapper .sliderIndex span { 68 display: inline-block; 69 width: 8px; 70 height: 8px; 71 background-color: #ccc; 72 border-radius: 50%; 73 margin-right: 10px; 74 cursor: pointer; 75 } 76 77 .wrapper .sliderIndex .active { 78 background-color: #f40; 79 }
搭建好后的效果如下：
传入（调用写好的运动函数）
1 //获取样式 2 function getStyle(dom, attr) { 3 if (window.getComputedStyle) { 4 return window.getComputedStyle(dom, null)[attr]; 5 } else { 6 return dom.currentStyle[attr]; 7 } 8 } 9 10 //运动函数 11 function startMove(dom, attr, func) { 12 clearInterval(dom.timer); 13 var iSpeed = null, //速度 14 iCur = null; //当前值 15 dom.timer = setInterval(function () { 16 for (var i in attr) { 17 if (i == 'opacity') { //判断是否为 透明 属性，是的话，特殊处理； 18 iCur = parseFloat(getStyle(dom, i)) * 100; 19 } else { 20 iCur = parseInt(getStyle(dom, i)); 21 } 22 iSpeed = (attr[i] - iCur) / 7; 23 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 24 25 if (i == 'opacity') { 26 dom.style.opacity = (iCur + iSpeed) / 100; 27 } else { 28 dom.style[i] = iCur + iSpeed + 'px'; 29 } 30 if (iCur == attr[i]) { 31 clearInterval(dom.timer); 32 func(); 33 } 34 } 35 }, 30) 36 }
开始写轮播图代码
1 var timer = null; 2 var sliderPage = document.getElementsByClassName('sliderPage')[0]; 3 var moveWidth = sliderPage.children[0].offsetWidth; //sliderPage的子节点第n位的width等于movewidth 4 var num = sliderPage.children.length - 1; //li的长度减去1，相当于4-1=3；刚好到了第三张也就是最后一张 5 var leftBtn = document.getElementsByClassName('leftBtn')[0]; // 获取左按钮事件 6 var rightBtn = document.getElementsByClassName('rightBtn')[0]; //获取右按钮事件 7 var lock = true; //设置一个锁使定时器不发生冲突，true的时候可以进入，false就把锁锁上； 8 //相当于一个厕所，很多人在排队， 没进入前等于true，第一个进去之后把锁锁上(也就是等于false)这样别人就进不去， 9 //出来的时候把锁打开(也就是等于true)方便下一个进入 10 11 var index = 0; //小圆点初始值等于0 12 var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');//选出sliderIndex下面的所有span标签 13 14 15 // 点击向左 16 leftBtn.onclick = function () { 17 autoMove('right->left'); //当点击leftBtn的时候传入'right->left'这个实参 18 } 19 20 21 22 // 点击向右 23 rightBtn.onclick = function () { 24 autoMove('left->right'); //当点击rightBtn的时候传入'left->right'这个实参 25 } 26 27 28 //点击小圆点跳转至相应的图片和小圆点位置 29 for (var i = 0; i < oSpanArray.length; i++) { //先循环拿到3个span标签，也就是每个小圆点的位置 30 (function (myIndex) { 31 oSpanArray[i].onclick = function () { //给每一个小圆点注册一个点击事件 32 lock = false; //点击后关闭锁，防止没执行完再次运行点击事件 33 clearInterval(timer); //清理定时器，防止没执行完再次开启定时器 34 index = myIndex; //myIndex和i形参实参相统一，myIndex付给index 35 startMove(sliderPage,{ left: - index * moveWidth }, //执行函数让sliderPage(也就是ul)移动 36 37 function () { //再执行回调函数 38 lock = true; //执行完再次开启锁，方便下次开启点击事件 39 timer = setInterval(autoMove, 1500); //开启定时器，让图片继续运动 40 changeIndex(index); //执行小圆点函数，让小圆点每次点击同步 41 }) 42 } 43 })(i) 44 } 45 46 function autoMove(dierction) { // 函数形参传入dierction 47 48 if (lock) { //lock = true时进入判断 49 lock = false; //进来后等于false，判断之后再次开启锁 50 clearInterval(timer); // 每次进入autoMove函数的时候立即关闭定时器，执行下面代码之后再次开启定时器。 51 // 相当于执行一次轮播一张图片之后再次开启一次定时器，再次轮播一张图片，无限循环。 52 if (!dierction || dierction == 'left->right') { //不传入参数时dierction等于undefined !undfined时等于true，进入if语句。 53 //点击左右函数的时候传入实参 54 index++; //小圆点位置每次加1 55 startMove(sliderPage,{ left: sliderPage.offsetLeft - moveWidth }, //执行函数startMove,sliderPage里面left当前值减去li的宽度，所以图片移动 56 function () { //再执行回调函数 57 if (parseInt(getStyle(sliderPage, 'left')) == -num * moveWidth) { // 判断当前left的值是否等于最后一个，也就是到了最后一张图片 58 index = 0; // 当到了最后一张的时候，小圆点跳转到第一张，小圆点下角标为0，也就是等于第一张图片。 59 sliderPage.style.left = '0px'; // 如果等于到了最后一张图片的话，就当前left值等于0。 === 回到第一张图片 60 } 61 timer = setInterval(autoMove, 1500); // 每次执行结束之后再次开启定时器 62 lock = true; //出去前等于true，方便下次进入，使定时器不会发生冲突同时运行多个定时器 63 changeIndex(index); //执行小圆点 64 }); 65 66 } else if (dierction == 'right->left') { //当点击right按钮后实参传入'right->left',进入if语句执行以下代码 67 if (sliderPage.offsetLeft == 0) { //如果开始执行的时候当前位置等于0 68 sliderPage.style.left = - num * moveWidth + 'px'; //那就把最后一张的位置付给他，让他跳转至最后一张 69 index = num; //如果刚开始的时候，当前位置等于0点击向left那么跳转到最后一张图片的位置，所以直接index的下角标直接等于最后一张的位置 70 } 71 index--; //小圆点位置每次减1 72 startMove(sliderPage,{ left: sliderPage.offsetLeft + moveWidth }, 73 function () { 74 timer = setInterval(autoMove, 1500); //每次执行之后再次开启定时器 75 lock = true; //出去前等于true，方便下次进入，使定时器不会发生冲突同时运行多个定时器 76 changeIndex(index); //执行小圆点 77 }) 78 } 79 } 80 } 81 function changeIndex(_index) { 82 for (var i = 0; i < oSpanArray.length; i++) { 83 oSpanArray[i].className = ''; //循环小圆点让每个位置的classname等于空 84 } 85 oSpanArray[_index].className = 'active'; //因为原始值是0，所以第一个有classname样式，每次index加数，下角标改变时classname也同步改变 86 } 87 timer = setInterval(autoMove, 1500); // 设置一个定时器，每1500毫秒运行一次autoMove函数
