<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul,div,img{ margin: 0; padding: 0; list-style: none; vertical-align: top; } #banner{ width: 400px; height: 300px; margin:50px auto; position: relative; overflow: hidden; } #banner ul{ width: 400px; position: absolute; } #banner li img{ width: 400px; height: 300px; text-align: center; line-height: 300px; font-size: 40px; } #dot{ height: 20px; position: absolute; left: calc(50% - 80px); bottom: 20px; } #dot i{ width: 14px; height: 14px; border-radius: 50%; background: #fff; float: left; margin: 0 10px; cursor: pointer; } #dot i.current{ background: rgb(161,1,34); } #pages{ height: 60px; width:100%; position: absolute; top: calc(50% - 30px); cursor: pointer; } #pages i{ width:30px; height: 60px; background: rgb(0,0,0); font-size: 22px; color: #fff; text-align: center; line-height: 60px; opacity: 0.5; font-style: normal; position: absolute; user-select: none; } #pages i.gt{ right:0; top: 0; font-size: 21px; } #pages i:hover{ opacity: 0.7; } </style> </head> <body> <div> <ul> <li><img src="images2/imgs (1).jpg" alt=""></li> <li><img src="images2/imgs (2).jpg" alt=""></li> <li><img src="images2/imgs (3).jpg" alt=""></li> <li><img src="images2/imgs (4).jpg" alt=""></li> <li><img src="images2/imgs (5).jpg" alt=""></li> <li><img src="images2/imgs (6).jpg" alt=""></li> <li><img src="images2/imgs (7).jpg" alt=""></li> <li><img src="images2/imgs (8).jpg" alt=""></li> </ul> <div> </div> <div> <i>^</i> <i>v</i> </div> </div> <script src="https://www.jb51.net/tool.js"></script> <script type="text/javascript"> var lis = $("li", $("#ul")), liHeight = lis[0].offsetHeight, len = lis.length; c = 1; n = 2; var first = lis[0].cloneNode(true), last = lis[len - 1].cloneNode(true); $("#ul").insertBefore(last, lis[0]); $("#ul").appendChild(first); var html = ""; for(var i = 0; i < len; i++) html += "<i></i>"; len += 2; $("#dot").innerHTML = html; $("#ul").style.height = liHeight * len + "px"; $("#ul").style.top = -liHeight + "px"; var dots = $("i", $("#dot")); dots[0].className = "current"; var tf = true; function move(){ var _top = -n * liHeight; animate($("#ul"), {top : _top}, 300, function(){ if(n >= len){ n = 2; c = 1; css($("#ul"), "top", -liHeight + "px"); }else if(n <= 1){ c = len - 2; n = len - 1; css($("#ul"), "top", c * -liHeight + "px"); } }); var dotIndex = n - 1; if(dotIndex === len - 2) dotIndex = 0; else if(dotIndex === -1) dotIndex = len -3; for(let i =0; i<dots.length; i ++) dots[i].className = ""; dots[dotIndex].className = "current"; c = n; n++; } var timer = setInterval(move, 3000); $("#banner").onmouseover = function(){ clearInterval(timer); } $("#banner").onmouseout = function(){ timer = setInterval(move, 3000); } on($("#dot"), "mouseover", function(e){ e = e || event; var src = e.target || e.srcElement; if(src.nodeName === "I"){ var index = Array.from($("i", this)).indexOf(src); n = index + 1; move(); } }) var timeout; on($("#pages"), "click",function(e){ clearTimeout(timeout); if(tf){ tf = false; e = e || event; var src = e.target || e.srcElement; if(src.className === "gt"){ n = c - 1; move(); }else if(src.className === "lt"){ move(); } } timeout = setTimeout(function(){ tf = true; },400) }) </script> </body> </html>
更多关于轮播图效果的专题，请点击下方链接查看学习