<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="https://www.jb51.net/css/reset.css" /> <style> .jiantou { height: 36px; width: 24px; line-height: 36px; text-align: center; background-color: rgba(0, 0, 0, .3); font-size: 14px; color: #fff; position: absolute; top: 0; bottom: 0; margin: auto 0; display: none; z-index: 99999; cursor: pointer; } .left { left: 0; } .right { right: 0; } ul li { height: 20px; width: 20px; background-color: #B7B7B7; float: left; border-radius: 50%; margin: 2px; } ul { position: absolute; bottom: 15px; margin: 0 auto; background-color: rgba(255, 255, 255, .3); border-radius: 10px; left: 300px; z-index: 9999; cursor: pointer; } .on { background-color: #F40; } img { width: 790px; height: 340px; position: absolute; opacity: 0; /*transition: all 2s;*/ /*transition: all 0.5s;*/ /*时间给短一些*/ transition: opacity 0.5s; /*不要写all 那么就不会影响到z-index*/ z-index: 0; } .in { width: 790px; height: 340px; } #out { width: 790px; height: 340px; margin: 100px auto; position: relative; } #out:hover .jiantou { display: block; } </style> </head> <body> <div> <div> <img src="https://www.jb51.net/img/j1.jpg" alt=""/> <img src="https://www.jb51.net/img/j2.jpg" alt=""/> <img src="https://www.jb51.net/img/j3.jpg" alt=""/> <img src="https://www.jb51.net/img/j4.jpg" alt=""/> <img src="https://www.jb51.net/img/j5.jpg" alt=""/> <img src="https://www.jb51.net/img/j6.jpg" alt=""/> <img src="https://www.jb51.net/img/j7.jpg" alt=""/> <img src="https://www.jb51.net/img/j8.jpg" alt=""/> </div> <div><</div> <div>></div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> var out = document.getElementById("out"); var img = document.images; var left = document.getElementsByClassName("left").item(0); var right = document.getElementsByClassName("right").item(0); var lilist = document.getElementsByTagName("li"); var index = 0;//标识哪张图片正在出现 var timer = null; var timer1 = null; right.onclick = function () { //把所有人的opacity置为0 /*for (var i = 0; i < img.length; i++) { img[i].style.opacity = 0; }*/ img[index].style.opacity = 0; img[index].style.zIndex = 0; lilist[index].className = ''; // index++; index == 7 ? index = 0 : index++; lilist[index].className = 'on'; img[index].style.opacity = 1; img[index].style.zIndex = 1; }; left.onclick = function () { img[index].style.opacity = 0; lilist[index].className = ''; img[index].style.zIndex = 0; // index--; index == 0 ? index = 7 : index--; lilist[index].className = 'on'; img[index].style.opacity = 1; img[index].style.zIndex = 1; }; for (var i = 0; i < lilist.length; i++) { lilist[i].value = i; lilist[i].onmouseover = function () { var that = this; timer=setTimeout(function () { img[index].style.opacity = 0; lilist[index].className = ''; img[index].style.zIndex = 0; index = that.value; lilist[index].className = 'on'; img[index].style.opacity = 1; img[index].style.zIndex = 1; },300) }; lilist[i].onmouseout = function () { clearTimeout(timer); } } out.onclick = function (e) { console.log(e.target); }; timer1 = setInterval(right.onclick,2000); out.onmouseover = function () { clearInterval(timer1); }; out.onmouseout = function () { timer1 = setInterval(right.onclick, 2000); }; var num =5 var arr = []; var img =document.images; for(var i=0;i<img.length;i++){ if(i<5){ arr.push(img[i].offsetHeight); }else { img[i].style.position='abl' } } </script> </body> </html>
原生JS京东轮播图代码
内容版权声明：除非注明，否则皆为本站原创文章。