今天看了好久 写了好久 注释都在代码里 直接上代码了
今天写这个的时候 意识到了变量的重要性
在这里面下路导航的变量跟上边含图片的标签的变量分不清 很难受以后不能这么写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图啊QAQ</title> <style> * { margin: 0; padding: 0; } .box { width: 590px; height: 470px; margin: 100px auto; border: 2px solid #ccc; } img { vertical-align: top; } .inner { width: 590px; height: 470px; position: relative; overflow: hidden; } .inner ul { width: 1000%; position: absolute; left: 0; top: 0; } .inner li { float: left; list-style: none; } .indicators { width: 1000%; position: absolute; left: 490px; top: 452px; } .indicators ul { width: 100px; height: 18px; background: rgba(0, 0, 0, 0.1); line-height: 15px; border-radius: 10px; } .indicators li { float: left; border-radius: 50%; width: 15px; height: 15px; background-color: #fff; text-align: center; margin-right: 10px; font-size: 10px; cursor: pointer; } .indicators .current { background-color: skyblue; } .hah { position: relative; left: 0; top: 220px; display: none; } .hah span { display: block; width: 30px; height: 30px; text-align: center; color: #fff; font-size: 20px; cursor: pointer; background: rgba(0, 0, 0, 0.3); } .left { position: absolute; left: 0; } .right { position: absolute; right: 0; } </style> </head> <body> <div id="box" class="box"> <div class="inner" id="ph"> <ul> <li><a href="#"><img src="11.jpg" alt=""></a></li> <li><a href="https://sale.jd.com/act/GirplhRxAm8z1.html"><img src="22.jpg" alt=""></a></li> <li><a href="#"><img src="33.jpg" alt=""></a></li> <li><a href="#"><img src="44.jpg" alt=""></a></li> <!--<li><a href="#"><img src="11.jpg" alt=""></a></li>--> </ul> <div class="indicators" id="nav"> <ul> </ul> </div> <div class="hah" id="ying"> <span class="left"><</span> <span class="right">></span> </div> </div> </div> <script src="common.js"></script> <script> //获取最外面的div var box = my$("box"); //获取相框宽度 var imgWidth = box.children[0].offsetWidth; //获取含有图片的ul var ulobj =box.children[0].children[0]; //获取含有图片的所有li标签 获取了所有标签就能获取她的个数了 var liobj = ulobj.children; //获取右下角的小导航栏 var indicator = box.children[0].children[1].children[0]; //设置一个使得全部元素公用的索引 var indexBttom = 0; //复制第一个li 添加到最后 var heyLi = ulobj.children[0].cloneNode(true); ulobj.appendChild(heyLi); //第一步先根据图片的个数做出来相应导航栏的个数 for (var i = 0;i < liobj.length-1;i++){ var tempLi = document.createElement("li"); //为创建的li添加索引 tempLi.setAttribute("index",i); //设置li里面的内容 tempLi.innerHTML = i+1; indicator.appendChild(tempLi); //以上添加完毕 接着注册鼠标进入的事件 tempLi.onmouseover = function () { //取消所有li的样式 for (var j = 0;j < indicator.children.length;j++){ indicator.children[j].removeAttribute("class"); //写这个的时候容易把上述获得的 含有图片的li误当作indicator中的li } //为当前li 添加背景颜色 this.className = "current"; //在这里获取她的索引值 indexBttom = this.getAttribute("index"); //获取之后进行动画效果 animation(ulobj,-indexBttom*imgWidth); } } indicator.children[0].className = "current"; //第二步写左右箭头 //先设置经过box的时候显示 不经过的时候隐藏 box.onmouseover = function () { my$("ying").style.display = "block"; } box.onmouseout = function () { my$("ying").style.display = "none"; } //分别获得左右箭头 var arryL = my$("ying").children[0]; var arryR = my$("ying").children[1]; //两个箭头这里 写法不尽相同 因为右箭头到越界的位置的时候 不能再遍历进行去除 必须手动去除 //而到了左箭头这里 由于0的索引值有对应的indicator 所以直接遍历去除就行 不用再分情况 arryL.onclick = function () { //进来判断位置 if (indexBttom == 0){ //到达最左端 indexBttom = liobj.length-1; ulobj.style.left = -(indexBttom)*imgWidth + "px"; } indexBttom--; //进行动画效果 animation(ulobj,-indexBttom*imgWidth); for (var i = 0;i < indicator.children.length;i++){ indicator.children[i].removeAttribute("class"); } //再赋值给相应元素 indicator.children[indexBttom].className = "current"; } arryR.onclick = function () { if ( indexBttom == liobj.length-1){ indexBttom = 0; ulobj.style.left = 0+"px"; } indexBttom++; //进行动画效果 animation(ulobj,-indexBttom*imgWidth); if (indexBttom == liobj.length-1) { // 取消最后一个背景颜色 indicator.children[indicator.children.length-1].removeAttribute("class"); //设置第一个li背景颜色 indicator.children[0].className = "current"; } else { //先排它 for (var i = 0;i < indicator.children.length;i++){ indicator.children[i].removeAttribute("class"); } //再赋值给相应元素 indicator.children[indexBttom].className = "current"; } } </script> </body> </html>
今天自己改进了代码 准确说重写了一遍 思路清晰了不少，上代码!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图啊QAQ</title> <style> * { margin: 0; padding: 0; } .box { width: 590px; height: 470px; margin: 100px auto; border: 2px solid #ccc; } img { vertical-align: top; } .inner { width: 590px; height: 470px; position: relative; overflow: hidden; } .inner ul { width: 1000%; position: absolute; left: 0; top: 0; } .inner li { float: left; list-style: none; } .indicators { width: 1000%; position: absolute; left: 490px; top: 452px; } .indicators ul { width: 100px; height: 18px; background: rgba(0, 0, 0, 0.1); line-height: 15px; border-radius: 10px; } .indicators li { float: left; border-radius: 50%; width: 15px; height: 15px; background-color: #fff; text-align: center; margin-right: 10px; font-size: 10px; cursor: pointer; } .indicators .current { background-color: skyblue; } .hah { position: relative; left: 0; top: 220px; display: none; } .hah span { display: block; width: 30px; height: 30px; text-align: center; color: #fff; font-size: 20px; cursor: pointer; background: rgba(0, 0, 0, 0.3); } .left { position: absolute; left: 0; } .right { position: absolute; right: 0; } </style> </head> <body> <div id="box" class="box"> <div class="inner" > <ul> <li><a href="#"><img src="11.jpg" alt=""></a></li> <li><a href="https://sale.jd.com/act/GirplhRxAm8z1.html"><img src="22.jpg" alt=""></a></li> <li><a href="#"><img src="33.jpg" alt=""></a></li> <li><a href="#"><img src="44.jpg" alt=""></a></li> <!--<li><a href="#"><img src="11.jpg" alt=""></a></li>--> </ul> <div class="indicators" id="nav"> <ul> </ul> </div> <div class="hah" id="ying"> <span class="left"><</span> <span class="right">></span> </div> </div> </div> <script src="common.js"></script> <script> //获取最外面的div var box = my$("box"); //获取相框 var inner = box.children[0]; //获取相框的宽度 var imgWidth = inner.offsetWidth; //获取存图片的ul var ulObj = inner.children[0]; //获取所有图片的li标签 var imgLiObj = ulObj.children; //获取底部导航栏 var navBottom = my$("nav").children[0]; //获取导航栏的li 标签 var navLiObj = navBottom.children; //设置一个全局变量使得 底部导航栏和图片的 索引一致 var index = 0; //添加相应的底部导航栏li标签 for (var i = 0 ;i < imgLiObj.length;i++){ var tempLi = document.createElement("li"); tempLi.innerHTML = i+1; navBottom.appendChild(tempLi); tempLi.setAttribute("index",i); //为每个导航栏li注册鼠标进入事件 tempLi.onmouseover = function () { for (var j = 0 ;j < navLiObj.length;j++){ navLiObj[j].removeAttribute("class"); } this.className = "current"; //获取导航栏li的索引 var tempIndex = this.getAttribute("index"); //进行动画效果移动图片 animation(ulObj,-tempIndex*imgWidth); //更新全局变量index index = tempIndex; } } navLiObj[0].className = "current"; //克隆第一个图片li标签到最后 var heyLi = imgLiObj[0].cloneNode(true); ulObj.appendChild(heyLi); //设置进入div显示两侧导航栏的效果 box.onmouseover = function () { my$("ying").style.display = "block"; clearInterval(timeId); } //设置移出div隐藏两侧导航栏的效果 box.onmouseout = function () { my$("ying").style.display = "none"; var timeId= setInterval(clickHandle,2000); } //获取 左右箭头标签 var arryL = my$("ying").children[0]; var arryR = my$("ying").children[1]; //为每个箭头标签设置点击事件 arryL.onclick = function () { if (index == 0){ index = navLiObj.length; ulObj.style.left = -index*imgWidth + "px"; } index --; animation(ulObj,-index*imgWidth); for (var j = 0 ;j < navLiObj.length;j++){ navLiObj[j].removeAttribute("class"); } navLiObj[index].className = "current"; } arryR.onclick = function () { if (index == navLiObj.length){ index= 0; ulObj.style.left = 0 + "px"; } index++; animation(ulObj,-index*imgWidth); if (index == navLiObj.length) { navLiObj[navLiObj.length-1].removeAttribute("class"); navLiObj[0].className = "current"; } else { for (var j = 0 ;j < navLiObj.length;j++){ navLiObj[j].removeAttribute("class"); } navLiObj[index].className = "current"; } } //自动切换 var timeId= setInterval(clickHandle,2000); function clickHandle() { if (index == navLiObj.length){ index= 0; ulObj.style.left = 0 + "px"; } index++; animation(ulObj,-index*imgWidth); if (index == navLiObj.length) { navLiObj[navLiObj.length-1].removeAttribute("class"); navLiObj[0].className = "current"; } else { for (var j = 0 ;j < navLiObj.length;j++){ navLiObj[j].removeAttribute("class"); } navLiObj[index].className = "current"; } } </script> </body> </html>