<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片轮换</title> </head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script> $(function(){ var $this=$(".wyj"); var $li=$this.find(".uls li"); $li.eq(0).show().siblings().hide(); var index=$this.find(".uls li:visible").index(); var lenght=$li.length; //alert(lenght) //alert(index) //alert($("#ss").index()) $("#left").click(function(e) { //alert(index); index=index-1; if(index<=0){ index=lenght-1; } $li.eq(index).show().siblings().hide(); }); $("#right").click(function(e) { righ(); }); var righ=function(){ index=index+1; if(parseInt(index)>lenght-1){ index=0; } $li.eq(index).show().siblings().hide();} timer=setInterval(function(){ righ(); },500); $("#left,#right").hover(function(e) { clearInterval(timer); },function(){ timer=setInterval(function(){ righ(); },500);}) }) </script> <style> *{ margin:0px; padding:0px;} ul li{ list-style:none;} .wyj{ overflow: hidden; position: relative; height:300px; width:800px; height:300px; margin:0 auto; margin-top:100PX; } /*.uls li{ display:none;}*/ </style> <body> <div class="wyj"> <ul class="uls"> <li ><img src="images/banner_01.jpg"></li> <li ><img src="images/banner_02.jpg"></li> <li><img src="images/banner_03.jpg"></li> <li ><img src="images/banner_04.jpg"></li> </ul> <img src="images/rotaleft.gif" width="26" height="99" id="left" style="position:absolute; left:3px; top:110px; cursor:pointer;"> <img src="images/rotaright.gif" width="26" height="99" id="right" style="position:absolute; right:3px; top:110px; cursor:pointer;"> </div> </body> </html>
图片轮换其实就这几行代码
最新推荐文章于 2021-06-16 02:43:08 发布