浅谈JavaScript运动以及轮播图小demo
运动
运动原理：使用计时器，持续改变元素的属性
运动速度：取决于每次所走距离的多少
运动停止：判断什么时候到达目标位置，并清除计时器
匀速运动
运动频率和运动速度保持不变!
缓冲运动
运动速度发生变化，由快到慢
缓冲运动的关键：
1.速度逐渐变慢
var speed = (target - obj.offsetLeft) / 10;
2.对速度取整，避免数据丢失
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
透明度运动
透明度变量：var opa=30;
IE浏览器：box.style.filter = 'alpha(opacity:' + opa + ')';
其他浏览器：box.style.opacity = opa/100;
多元素进行相同的运动，属性都不能共用！
透明度轮播图
.wrap{ width: 386px; height: 272px; border: 1px solid #000; margin: 100px auto 0; position: relative; } .imgs{ width: 386px; height: 272px; position: relative; } .imgs img{ width: 386px; height: 272px; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0.1; } .num{ position: absolute; right: 5px; bottom: 10px; z-index: 9999; } .num li{ float: left; width: 22px; height: 22px; line-height: 22px; text-align: center; background: #ccc; border-radius: 50%; margin: 0 5px; cursor: pointer; } .left{ width: 25px; height: 25px; background: url(img/fx1.png) 0 0 no-repeat; position: absolute; left: 0; top: 130px; cursor: pointer; z-index: 9999; } .right{ width: 25px; height: 25px; background: url(img/fx2.png) 0 0 no-repeat; position: absolute; right: 0; top: 130px; cursor: pointer; z-index: 9999; } .num .show{ background: blue; color: #fff; } </style> </head> <body> <div class="wrap"> <div class="imgs"> <img style="z-index:10;" src="img/01.jpg" alt=""> <img src="img/02.jpg" alt=""> <img src="img/03.jpg" alt=""> <img src="img/04.jpg" alt=""> <img src="img/05.jpg" alt=""> </div> <ul class="num"> <li class="show">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <p class="left"></p> <p class="right"></p> </div> <script> var imgs = document.querySelectorAll('.imgs img'); var lis = document.querySelectorAll('.num li'); var left = document.querySelector('.left'); var right = document.querySelector('.right'); var timer = null, timer2 = null; // var opa = 10;//透明度初始值 var index = 0;//当前图片的下标 move(imgs[index],100);//进入页面执行 autoMove();//进入页面执行 // 1.自动切换 function autoMove() { timer2 = setInterval(function () { initVal(); index++; if (index == imgs.length) { index = 0; } setVal(); },3000); } // 2.点击数字，显示数字对应的图片 for (var i = 0; i < lis.length; i++){ lis[i].index = i; lis[i].onclick = function () { clearInterval(timer2); initVal(); index = this.index;//同步下标 setVal(); autoMove();//控制结束，3秒后自动走 } } // 3.点击右边按钮 下标+1 right.onclick = function () { clearInterval(timer2); initVal(); index++; if (index >= imgs.length) {//临界值判断 index = 0; } setVal(); autoMove();//控制结束，3秒后自动走 } // 4.点击左边按钮 下标-1 left.onclick = function () { clearInterval(timer2); initVal(); index--; if (index < 0) {//临界值判断 index = imgs.length-1; } setVal() autoMove();//控制结束，3秒后自动走 } // 设置当前样式 function setVal() { imgs[index].style.zIndex = 10;//当前图片 lis[index].className = 'show';//当前显示数字的样式 move(imgs[index],100);//运动 } // 设置为初始值 function initVal() { imgs[index].style.zIndex = 1;//上一个图片设置为初始值 imgs[index].style.opacity = 0.1;//上一个图片设置为初始值 lis[index].className = '';//清除上一个数字的类名 } // 透明度运动函数 function move(dom,target) { clearInterval(timer); var opa = 10;//透明度初始值 timer = setInterval(function () { if (target > opa) {//运动方向 var speed = 2; } else { var speed = -2; } // 剩余的运动量 < 每次所走的运动量 if (Math.abs(opa - target) < Math.abs(speed)) { clearInterval(timer); // opa = 10; dom.style.opacity = target / 100;//终点 } else { opa += speed; dom.style.opacity = opa / 100; } },30); } </script> 自动走轮播图 <style> *{margin:0; padding:0; list-style: none;} .wrap{ width: 386px; height: 289px; border: 1px solid #000; margin: 100px auto 0; position: relative; } .main{ width: 386px; height: 289px; overflow-x: hidden; } .imgs{ width: 6000px; height: 272px; } .imgs img{ width: 386px; height: 272px; float: left; } .num{ position: absolute; right: 5px; bottom: 30px; z-index: 9999; } .num li{ float: left; width: 22px; height: 22px; line-height: 22px; text-align: center; background: #ccc; border-radius: 50%; margin: 0 5px; cursor: pointer; } .left{ width: 25px; height: 25px; background: url(img/fx1.png) 0 0 no-repeat; position: absolute; left: 0; top: 130px; cursor: pointer; z-index: 9999; } .right{ width: 25px; height: 25px; background: url(img/fx2.png) 0 0 no-repeat; position: absolute; right: 0; top: 130px; cursor: pointer; z-index: 9999; } .num .show{ background: blue; color: #fff; } </style> </head> <body> <div class="wrap"> <div class="main"> <div class="imgs"> <img src="img/05.jpg" alt=""> <img src="img/01.jpg" alt=""> <img src="img/02.jpg" alt=""> <img src="img/03.jpg" alt=""> <img src="img/04.jpg" alt=""> <img src="img/05.jpg" alt=""> <img src="img/01.jpg" alt=""> </div> </div> <ul class="num"> <li class="show">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <p class="left"></p> <p class="right"></p> </div> <script> var imgs = document.querySelectorAll('.imgs img'); var lis = document.querySelectorAll('.num li'); var main = document.querySelector('.main'); var left = document.querySelector('.left'); var right = document.querySelector('.right'); var img1w = imgs[0].clientWidth;//一张图片的宽度 var timer1 = null, timer2 = null; // var opa = 10;//透明度初始值 var imgIndex = 1;//当前图片的下标 var numIndex = 0;//当前数字的下标 main.scrollLeft = img1w; autoMove();//进入页面执行自动走 // 1.自动走 function autoMove() { clearInterval(timer2); timer2 = setInterval(function () { imgIndex++; if (imgIndex >= imgs.length) { imgIndex = 2; main.scrollLeft = img1w * (imgIndex-1); } lis[numIndex].className = ''; numIndex++; if (numIndex >= lis.length) { numIndex = 0; } lis[numIndex].className = 'show'; move(); },2000); } // 2.点击数字，图片运动到该显示的位置 for (var i = 0; i < lis.length; i++){ lis[i].index = i; lis[i].onclick = function () { clearInterval(timer2);//停止自动走 lis[numIndex].className = ''; numIndex = this.index; imgIndex = this.index + 1; lis[numIndex].className = 'show'; move(); autoMove();//启动自动走 } } // 3.点击右边按钮 right.onclick = function () { clearInterval(timer2);//停止自动走 imgIndex++; if (imgIndex >= imgs.length) { imgIndex = 2; main.scrollLeft = img1w * (imgIndex-1); } lis[numIndex].className = ''; numIndex++; if (numIndex >= lis.length) { numIndex = 0; } lis[numIndex].className = 'show'; move(); autoMove();//启动自动走 } // 4.点击左边按钮 left.onclick = function () { clearInterval(timer2);//停止自动走 imgIndex--; if (imgIndex < 0) { imgIndex = imgs.length - 3;//4 main.scrollLeft = img1w * (imgIndex + 1); } lis[numIndex].className = ''; numIndex--; if (numIndex < 0) { numIndex = lis.length - 1; } lis[numIndex].className = 'show'; move(); autoMove();//启动自动走 } function move() { var start = main.scrollLeft;//起始位置 var end = img1w * imgIndex;//终点位置 var minStep = 0;//起始步数 var maxStep = 50;//最大步数 var everyStep = (end - start) / maxStep;//每步要走的距离 clearInterval(timer1); timer1 = setInterval(function () { minStep++;//每隔15毫秒跑一步 if (minStep == maxStep) {//到达最大步数 clearInterval(timer1); } start += everyStep;//每跑一步累加一段距离(everyStep) main.scrollLeft = start; },15); }
