#轮播图dome
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="lbbox"> <ul class="oUl"> <a href=""> <li><img src="./imager/1.jpg" alt=""></li> </a> <a href=""> <li><img src="./imager/2.jpg" alt=""></li> </a> <a href=""> <li><img src="./imager/3.jpg" alt=""></li> </a> <a href=""> <li><img src="./imager/4.jpg" alt=""></li> </a> <a href=""> <li><img src="./imager/5.jpg" alt=""></li> </a> <a href=""> <li><img src="./imager/1.jpg" alt=""></li> </a> </ul> <span class="lf">〈</span> <span class="rg">〉</span> <div class="raidusYuan"> <span class="yuanS"></span> <span class=""></span> <span class=""></span> <span class=""></span> <span class=""></span> </div> </div> <script src="./js/index.js"></script> </body> </html> *{ padding: 0; margin: 0; text-decoration: none; list-style: none; } .lbbox{ width:980px; height:420px; margin: 80px auto; position: relative; overflow: hidden; } .oUl{ width: 9999999px; height:420px; position: absolute; top: 0; left: 0; } .oUl a{ display: block; width: 980px; height:420px; float: left; } .oLi a li img{ width: 980px; height:420px; } .lf,.rg{ width: 50px; height: 50px; position: absolute; background: black; text-align: center; font-weight: bold; line-height: 50px; font-size:30px; color: rgb(255, 255, 255); opacity: 0.4; cursor: pointer; } .lf{ left: 0; top:210px; } .rg{ right: 0; top:210px; } .yuanS{ background: black; } .raidusYuan{ width: 300px; height: 30px; position: absolute; left: 327px; top: 347px; } .raidusYuan span{ cursor: pointer; margin-left: 30px; height: 20px; border-radius: 50%; width: 20px; display: block; float: left; border: solid 1px rgb(255, 255, 255) } var timer = null; //创建定时器的开关 var sliderPage = document.getElementsByClassName('oUl')[0]; //获取ul标签 var moverWidth = sliderPage.children[0].offsetWidth; //获取一张轮播图的宽度 var num = sliderPage.children.length - 1; //获取所以轮播图的张数 var leftBtn = document.getElementsByClassName('lf')[0]; //获取左按钮 var rightBtn = document.getElementsByClassName('rg')[0]; //获取右按钮 var oSPan = document.getElementsByClassName('raidusYuan')[0].getElementsByTagName('span') //获取圆点 var key = true; //锁 var index = 0; //创建一个变量用来判断样式圆点在那个位置 function changeIndex(_index){ //给圆点添加样式函数 for(var i = 0; i < oSPan.length; i ++){ //获取每个圆点的位置 oSPan[i].className = ' '; //让当前所有的圆点的class变为空 } oSPan[_index].className = "yuanS" //让当前的index的值也就是当前轮播图圆点变为黑色。 } for(var i = 0; i < oSPan.length; i ++){ //给当前每一个圆点加点击事件 (function(i){ //会触发闭包，使用立即执行函数 oSPan[i].onclick = function(){ //添加事件 key = false; //将锁关上 clearTimeout(timer); //清楚定时器 index = i; //让当前的Index等于当前点击按钮对等轮播图的位置 startMove(sliderPage, {left: - index * moverWidth,},function(){ //starMove函数是dom运动函数,让当前ul的位置 减去点击的位置的数字* 宽度 key = true; //将锁打开 timer = setTimeout(autoMove,1500); //执行图片自己动 changeIndex(index) //改变圆点样式 }) } }(i)) } function autoMove(direction){ //轮播图自左向右自动运动 clearTimeout(timer) //清除定时器 if(key){ //先看锁开了没有，如果锁是关着的则不执行，防止两个定时器一起动发生冲突。 key = false; //将锁关闭 if(!direction || direction == "left->right"){ //如果当前的值是"left->right" index ++; //让index加一个值 startMove(sliderPage,{left : sliderPage.offsetLeft - moverWidth}, function () { //图片运动函数，让当前Ul的宽度减去初始的moveWidth宽度 if(sliderPage.offsetLeft == -num * moverWidth){ //如果越界了，当前Ul的宽度等于所有轮播图的张数的宽度 index = 0; //让圆点值等于1 sliderPage.style.left = '0px'; //让轮播图归位第一张 } changeIndex(index); //执行圆点样式 timer = setTimeout(autoMove,1500); //再一次执行自动轮播 key = true; //将锁打开 console.log(index) }) }else if(direction == "right->left"){ //如果点击是自右向左 if(sliderPage.offsetLeft == 0){ //先判断当前的Ul轮播图是不是第一张 sliderPage.style.left = - num * moverWidth + 'px'; //如果是让当前ul的宽度值直接等于所有轮播图的最后一张的宽度值 index = num; ///让圆点等于最后一张轮播图位置数字的值 } index --; //如果不是第一张就index --一个值 startMove(sliderPage,{left : sliderPage.offsetLeft + moverWidth,}, function () { //执行动画 changeIndex(index); //执行圆点样式 timer = setTimeout(autoMove,1500); //执行自动定时器 key = true; //让锁打开 }) } } } leftBtn.onclick = function(){ //给左按键添加点击事件 autoMove('right->left'); //传入参数自右向左 } rightBtn.onclick = function(){ //给右键添加点击事件 autoMove('left->right'); //传入参数自左向右 } setTimeout(autoMove,1500); //初始自动加载函数 //获取当前元素的class值的方法 function getStyle (dom, attr){ if(window.getComputedStyle){ return window.getComputedStyle(dom, null)[attr]; }else{ return dom.currentStyle[attr]; } } //动画方法，看之前的博客文章有写到 function startMove(dom, attrObj, callback) { clearInterval(dom.timer); var iSpeed = null, iCur = null; dom.timer = setInterval(function () { var bStop = true; for (var attr in attrObj) { if (attr == 'opacity') { iCur = parseFloat(getStyle(dom, attr)) * 100 } else { iCur = parseFloat(getStyle(dom, attr)); } iSpeed = (attrObj[attr] - iCur) / 7; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(attr == 'opacity'){ dom.style.opacity = (iCur + iSpeed) / 100; }else{ dom.style[attr] = iCur + iSpeed + 'px' } if( iCur != attrObj[attr]){ bStop = false; } } if(bStop) { clearInterval(dom.timer); typeof callback == 'function' && callback() } }, 30) }