<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .iim{ position: absolute; list-style: none; top: 0px; left: 0px; {#display: none;#} } .out{ position: relative; top: 100px; left: 450px; width: 590px; } .xia{ position: absolute; top: 420px; left: 170px; height: 20px; width: 250px; } .xia li{ background: aliceblue; display: inline-block; width: 18px; height: 18px; border-radius: 50%; margin-left: 4px; } .fangkuai{ color: beige; font-size: 30px; position: absolute; top: 200px; opacity: 0.7; background: darkgray; height: 50px; width: 50px; line-height: 50px; text-align: center; display: none; } .left{ left: 0; } .right{ right: 0px; } .xia .coo{ background: red; } .out:hover .fangkuai{ display: block; } </style> </head> <body> <div class="out"> <ul class="img"> <li class="iim"> <a><img src="https://m.360buyimg.com/babel/jfs/t17320/174/2067264907/100831/453dd451/5ae442fdN7f678991.jpg"></a> </li> <li class="iim"> <a><img src="https://img1.360buyimg.com/pop/jfs/t17557/227/1912529837/199083/60df45d9/5add87d9Nb54b25e4.jpg"></a> </li> <li class="iim"> <a><img src="https://img1.360buyimg.com/pop/jfs/t17614/203/1019745379/186817/a330f322/5ab8a6c1N5efa5944.jpg"></a> </li> <li class="iim"> <a><img src="https://m.360buyimg.com/babel/jfs/t19798/280/54261119/54820/2324cbc/5ae2d739N2cf3fc4e.jpg"></a> </li> <li class="iim"> <a><img src="https://img1.360buyimg.com/pop/jfs/t19543/147/1339756783/151455/59295be9/5ac9cefaN93744aa1.jpg"></a> </li> <li class="iim"> <a><img src="https://m.360buyimg.com/babel/jfs/t19390/224/2052806888/99084/3d521b17/5ae3de33Nc5be5a4c.jpg"></a> </li> </ul> <ul class="xia"> </ul> <div class="fangkuai left"> < </div> <div class="fangkuai right"> > </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> var x=0; var imgNum = $(".img li").length; for (var i=0; i<imgNum; i++){ $(".xia").append("<li></li>") } $(".xia li").eq(0).addClass("coo") $(".xia li").mouseover(function () { x = $(this).index(); $(this).addClass("coo").siblings().removeClass('coo'); $(".img li").eq(x).stop().fadeIn(1000).siblings().stop().fadeOut(1000) }) var c=setInterval(rig,2000); x=0; function rig() { if (x==imgNum-1) {x=-1}; x++; $(".xia li").eq(x).addClass("coo").siblings().removeClass('coo'); $(".img li").eq(x).stop().fadeIn(400).siblings().stop().fadeOut(400); } function lef() { if (x==-1) {x=imgNum-1}; x--; $(".xia li").eq(x).addClass("coo").siblings().removeClass('coo'); $(".img li").eq(x).stop().fadeIn(400).siblings().stop().fadeOut(400); } $(".out").hover(function () { clearInterval(c) },function () { c=setInterval(rig,2000) }); $(".right").click(rig); $(".left").click(lef); </script> </body> </html>
简单轮播图
最新推荐文章于 2024-06-17 16:07:25 发布