轮播图案例
Posted yucheng6
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图案例相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图4</title> <style> *{ margin: 0; padding: 0; list-style: none; } .box { overflow: hidden; position: relative; } img { width: 640px; height: 400px; } ol { width: 30000px; position: absolute; } ol li{ float: left; } .box{ width: 640px; height: 400px; border: orange 2px solid; } #btn{ position:absolute; right: 10px; bottom: 10px; } #btn li { width: 20px; height: 20px; line-height: 20px; text-align: center; color: white; display: inline-block; border: 1px solid deepskyblue; margin-right: 5px; cursor: pointer; } .foc{ background-color: coral; } .arr { width: 640px; height: 400px; position: absolute; top: 0; /*display: block;*/ } .arr span { width: 50px; height: 80px; background-color: rgba(255,255,255,0.3); color: #E2D762; position: absolute; top: 50%; margin-top: -40px; line-height: 80px; font-size: 20px; font-weight: bold; text-align: center; z-index: 65151; cursor: pointer; border-radius: 0 8px 8px 0; } #right{ right: 0; border-radius: 8px 0 0 8px; } </style> </head> <body> <div class="box" id="box"> <div class = "arr"> <span id = "left"> < </span> <span id= "right"> > </span> </div> <ol class = "pic"> <li><a href="#"><img src="../images/1.jpg" alt=""></a></li> <li><a href="#"><img src="../images/2.jpg" alt=""></a></li> <li><a href="#"><img src="../images/3.jpg" alt=""></a></li> <li><a href="#"><img src="../images/4.jpg" alt=""></a></li> <li><a href="#"><img src="../images/5.jpg" alt=""></a></li> </ol> <ul id="btn"> <!--这里放小按钮--> </ul> </div> <script> var box = document.getElementById("box"); var pic = document.getElementsByClassName("pic")[0]; var imgW = document.getElementsByTagName("img")[0].width; var list = pic.children; var btn = document.getElementById("btn"); var arr = document.getElementsByClassName("arr")[0]; var left = arr.firstElementChild; var right = arr.lastElementChild; //引入移动的函数 function move(element,target){ clearInterval(timeId); //解决隐藏的BUG，每次点击先清理定时器再创建定时器，解决多次点击时运动变快的BUG var current = element.offsetLeft; var timeId = setInterval(function(){ if (current != target) { var temp = 9; //设置每次走的距离 这句代码放进计时器中才能实现往回走，即current>target的情况。因为这种情况每次计时都要设置temp = -10,不放进来的话temp会10，-10来回变，导致盒子抖动不能到达目标地 temp = current <= target ? temp : -temp; //根据当前和目标的关系确定往哪走 if (Math.abs(current-target) > Math.abs(temp)) { //当前距离大于每次走得距离则继续走 current += temp; element.style.left = current + "px"; } else { //当前距离小于等于每次走得距离：则直接跳到目标位置,并且清理定时器 element.style.left = target + "px"; clearInterval(timeId); } } },1); } //创造小按钮 for (var i = 0; i < list.length; i++) { var li = document.createElement("li"); btn.appendChild(li); li.innerText = i+1; li.setAttribute("index",i);//设置一个自定义属性 btn.firstElementChild.className = "foc";//设置初始第一个按钮的样式 //创造的同时注册鼠标进入事件 var index = 0; //全局变量 li.onmouseover = function () { for (var j = 0; j < btn.children.length; j++) { btn.children[j].className = "";//清除所有按钮的样式 this.className = "foc"; //设置当前按钮的样式 } index = this.getAttribute("index"); move(pic, -index*imgW); }; } //制作左右点击的部分 //设置鼠标进入离开 box.onmouseover = function(){ arr.style.display = "block"; }; box.addEventListener("mouseout",function(){ arr.style.display = "none"; },false) pic.appendChild(list[0].cloneNode(true));//克隆第一个图放到最后 //设置 鼠标点击事件 right.onclick = rightMove; function rightMove(){ console.log(index); //设置图片的运动 if(index == list.length-1){ //当到达克隆的那一张再点击时， index = 0; //索引复原 pic.style.left = 0+"px";//立即跳到第一张 } index ++; //将索引加一即下一个小按钮对应的索引。这里调用了上个函数内的变量，必须将这个变量设置为全局变量才能得到 move(pic, -index*imgW);//这两句放在if的外面，每次点击都会做的事 //设置小按钮的样式变化 if(index == list.length-1 ){ //当到达克隆的图时，应该把第一个小按钮设置上 for (var j = 0; j < btn.children.length; j++) { btn.children[j].className = "";//清除所有按钮的样式 btn.children[0].className = "foc"; //设置第一个按钮的样式 } }else{ for (var j = 0; j < btn.children.length; j++) { btn.children[j].className = "";//清除所有按钮的样式 btn.children[index].className = "foc"; //设置当前按钮的样式 } } // 特别注意：由于小按钮个数和图片个数不同，导致利用索引设置小按钮样式时会出现BUG， // 即索引值加到length-1时已经无法设置这个对应的小按钮（这个小按钮不存在）所以设置按钮样式的代码和设置图片移动的代码应分开 //克隆的加入，最后一张伪图的加入导致这里很绕，索引值与图片的对应关系变化，索引值与小按钮的对应变化应注意 }; left.onclick = function () { console.log(index); if(index == 0){ //在第一张时点击 index = list.length-1; //索引到最大 pic.style.left = -index*imgW+"px";//立即跳到clone的那张图 } index --; move(pic, -index*imgW); for (var j = 0; j < btn.children.length; j++) { btn.children[j].className = "";//清除所有按钮的样式 } btn.children[index].className = "foc"; //设置当前按钮的样式，这句放在for外面更好，只执行一次，放在for里会执行多次 //这里的按钮样式设置不需要考虑特殊情况，因为这里的索引会--，索引与按钮会对应，而上面索引++时要考虑索引大于按钮的情况 }; //设置自动轮播 //思路：利用定时器每隔一段时间执行一次点击有点按钮的事件 </script> </body> </html>
以上是关于轮播图案例的主要内容，如果未能解决你的问题，请参考以下文章