轮播

拼搏现实的明天。 2021-09-14 12:58 402阅读 0赞

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } img{ width:533px; height:300px; } .container{ width:533px; height:300px; position: relative; margin:10px auto; } .con div{ display: none; position: absolute; } .container .current{ display: block; } .dian{ position: absolute; bottom:10px; left:200px; width:200px; height:30px; } .dian li{ height:10px; width:10px; border-radius:50%; margin:auto 10px; background: #fff; float: left; list-style: none; } .dian .current{ background: #f38; } .container:hover .prev{ display: block; } .container:hover .next{ display: block; } .next{ height:70px; width:30px; line-height:70px; font-size: 30px; font-weight:700; color:#fff; position: absolute; top:115px; background: rgba(0,0,0,.4); right:0; display: none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor: pointer; } .prev{ height:70px; width:30px; line-height:70px; font-size: 30px; font-weight:700; color:#fff; position: absolute; top:115px; background: rgba(0,0,0,.4); left:0; display: none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor: pointer; } </style> </head> <body style="text-align: center;"> <div class="container"> <div class="con"> <div class="current"><img src="images/u=463629470,3575711901&fm=27&gp=0.jpg" alt=""></div> <div><img src="images/u=1756874692,3026443319&fm=27&gp=0.jpg" alt=""></div> <div><img src="images/u=2851990104,2745395319&fm=27&gp=0.jpg" alt=""></div> <div><img src="images/u=3987449404,3914005315&fm=27&gp=0.jpg" alt=""></div> </div> <ul class="dian"> <li class="current"></li> <li></li> <li></li> <li></li> </ul> <a class="next">></a> <a class="prev"><</a> </div> </body> <script src="jquery/jquery.js"></script> <script> $(function () { clearInterval(timer); $('.next').on('click',function(){ next($('.con div'),$('.dian li')); }); $('.prev').on('click',function(){ prev($('.con div'),$('.dian li')); }); var timer=setInterval(function () { next($('.con div'),$('.dian li')); },3000); $('.container').hover(function () { clearInterval(timer); },function () { clearInterval(timer); timer=setInterval(function () { next($('.con div'),$('.dian li')); },3000); } ); $('.dian li').on('click',function () { var index=$(this).index(); $('.con div').eq(index).stop().fadeIn().siblings().stop().fadeOut(); $(this).addClass('current').siblings().removeClass('current'); n=index; }) }); var n=0; var leg=$('.container div').length; //obj=$('.con div'); //obj1=$('.dian li'); function next(obj,obj1) { //封装一个点击向左的函数 n++; if(n>leg-2){ n=0 } obj.eq(n).stop().fadeIn().siblings().stop().fadeOut(); obj1.eq(n).addClass('current').siblings().removeClass('current'); } function prev(obj,obj1) { //封装一个点击向左的函数 n--; if(n<0){ n=leg-2; } obj.eq(n).stop().fadeIn().siblings().stop().fadeOut(); obj1.eq(n).addClass('current').siblings().removeClass('current'); } </script> </html>