<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .img { position: relative; width: 100%; height: 300px; margin-top: 100px; } .whole { width: 790px; height: 100%; margin: 0 auto; } .roll-img { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; } .roll-img ul li { position: absolute; width: 100%; height: 100%; cursor: pointer; } img { width: 100%; height: 100%; } .center { z-index: 6; left: 0; top: 0; bottom: 10%; transition: all 1s ease; } .after1, .after2, .after3, .after4, .after5 { z-index: 3; left: 0; top: 0; visibility: hidden; /*transform: scale(0);*/ } .last, .next { position: absolute; z-index: 10; width: 50px; height: 50px; font-size: 50px; font-weight: bold; text-align: center; line-height: 45px; cursor: pointer; top: 45%; color: rgba(255, 255, 255, 0.6); display: none; background: rgba(228, 220, 220, 0.7); } .btn { transition: all 0.3s ease; background: rgb(244, 244, 244); } .btn:not(:first-child) { margin-left: 20px; } .last { left: 0; } .next { right: 0; } .list { position: absolute; width: 260px; height: 20px; bottom: 6px; left: 560px; background: rgba(244, 244, 244, 0.2); padding-left: 12px; border-radius: 20px; } .list span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } </style> </head> <body> <div class="img"> <div class="whole"> <div class="roll-img"> <span class="last"><</span> <ul id="ul"> <li class="center"><img src="img/1.jpg" alt=""> <div></div> </li> <li class="after1"><img src="img/2.jpg" alt=""> <div></div> </li> <li class="after2"><img src="img/3.jpg" alt=""> <div></div> </li> <li class="after3"><img src="img/4.jpg" alt=""> <div></div> </li> <li class="after4"><img src="img/5.jpg" alt=""> <div></div> </li> <li class="after5"><img src="img/6.jpg" alt=""> <div></div> </li> <li class="after6"><img src="img/7.jpg" alt=""> <div></div> </li> <li class="after7"><img src="img/8.jpg" alt=""> <div></div> </li> </ul> <span class="next">></span> </div> </div> <div class="list"> <span class="btn"></span> <span class="btn" style="background: red;"></span> <span class="btn"></span> <span class="btn"></span> <span class="btn"></span> <span class="btn"></span> <span class="btn"></span> <span class="btn"></span> </div> </div> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let classes = ['left', 'center', 'right', 'after1', 'after2', 'after3', 'after4', 'after5']; let timer = setInterval(function() { before(); }, 2000); function before() { for(let i = 0; i < classes.length; i++) { $('.btn:eq(' + i + ')').css("background", "rgb(244,244,244)"); } let last = classes.pop(); classes.unshift(last); for(let i = 0; i < classes.length; i++) { $('#ul>li:eq(' + i + ')').attr("class", classes[i]); if($('#ul>li:eq(' + i + ')').attr("class") == 'center') { $('.btn:eq(' + i + ')').css("background", "red"); } } } function after() { for(let i = 0; i < classes.length; i++) { $('.btn:eq(' + i + ')').css("background", "rgb(244,244,244)"); } let first = classes.shift(); classes.push(first); for(let i = 0; i < classes.length; i++) { $('#ul>li:eq(' + i + ')').attr("class", classes[i]); if($('#ul>li:eq(' + i + ')').attr("class") == 'center') { $('.btn:eq(' + i + ')').css("background", "red"); } } } for(let i = 0; i < classes.length; i++) { (function(i) { $('#ul>li:eq(' + i + ')').click(function() { if($('#ul>li:eq(' + i + ')').attr("class") == "left") { after(); } else if($('#ul>li:eq(' + i + ')').attr("class") == "right") { before(); } else { return false; } }); $('.btn:eq(' + i + ')').mouseover(function() { $('.btn:eq(' + i + ')').css("background", "red"); clearInterval(timer); while(classes[i] != 'center') { before(); } }); $('.btn:eq(' + i + ')').mouseout(function() { $('.btn:eq(' + i + ')').css("background", "rgb(244,244,244)"); clearInterval(timer); timer = setInterval(function() { before(); }, 2000); }); })(i); } $('.next').click(function() { clearInterval(timer); before(); timer = setInterval(function() { before(); }, 2000); }); $('.last').click(function() { clearInterval(timer); after(); timer = setInterval(function() { before(); }, 2000); }); $('.img').mouseover(function() { $('.last,.next').css("display", "block"); clearInterval(timer); }); $('.img').mouseout(function() { $('.last,.next').css("display", "none"); clearInterval(timer); timer = setInterval(function() { before(); }, 2000); }); </script> </body> </html>