jquery 轮播图代码如下所示：
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片轮播</title> <style> *{margin:0px;padding:0px;} .one{ float:left; position:relative; left:0px; top:0px; margin-left:10px; width:790px; height:340px; overflow:hidden; } .one ul li{ list-style:none; } .photo ul{ float:left; position:absolute; height:490px; left:0px; top:0px; } .photo ul li{ float:left; padding:0px; margin:0px; } .arrow span{ display:block; position:absolute; width:30px; height:60px; line-height:60px; text-align:center; background:rgba(0,0,0,0.2); z-index:1; font-size:20px; color:#fff; top:40%; cursor:pointer; display:none; } .arrow span:hover{ background:rgba(0,0,0,0.7); } .arrow .right{ right:0px; } .dot{ position:absolute; z-index:!; background:rgba(255,255,255,0.2); font-size:26px; bottom:15px; left:300px; border-radius:22px; } .dot ul{ margin:0px; padding:0px; } .dot ul li{ float:left; padding:0px; margin:0px; margin:0 5px; cursor:pointer; } </style> </head> <body> <div> <div> <div> <ul> <li><img src="https://www.jb51.net/image/1.png" alt="1" /></li> <li><img src="https://www.jb51.net/image/2.png" alt="2" /></li> <li><img src="https://www.jb51.net/image/3.png" alt="3" /></li> <li><img src="https://www.jb51.net/image/4.png" alt="4" /></li> <li><img src="https://www.jb51.net/image/5.png" alt="5" /></li> <li><img src="https://www.jb51.net/image/6.png" alt="6" /></li> </ul> </div> <div><span></span> <span></span></div> <div> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js" ></script> <script> $(document).ready(function(){ var ulWidth=$('.photo ul li').length*$('.photo ul li').eq(1).width(); $('.dot ul li').first().css('color','#db192a'); $('.photo ul').width(ulWidth); $('.photo,.arrow span').hover(function(){$('.arrow span').toggle()}) function jdshow(){ var index=-$('.photo ul').position().left/$('.photo ul li').eq(1).width(); $('.dot ul li').css('color','#fff'); if(index==$('.photo ul li').length-1){index=-1} $('.dot ul li').eq(index+1).css('color','#db192a'); if($('.photo ul').position().left==-(ulWidth-790)){ $('.photo ul').css('left','790px');//图片宽度 $('.photo ul').clone().appendTo('.photo'); $('.photo ul:first').remove(); } $('.photo ul').animate({ left:'-=790px', },10); } setInterval(jdshow,2000); $('.arrow .right').click(function(){ jdshow(); }); $('.arrow .left').click(function(){ /*alert($('.jd-photo ul').position().left);*/ var index=-$('.photo ul').position().left/$('.photo ul li').eq(1).width(); $('.dot ul li').css('color','#fff'); $('.dot ul li').eq(index-1).css('color','#db192a'); if($('.photo ul').position().left==0){ $('.photo ul').css('left',-ulWidth); $('.photo ul').clone().appendTo('.photo'); $('.photo ul:first').remove(); } $('.photo ul').animate({ left:'+=790px', },10); }); $('.dot ul li').click(function(){ var index=$('.dot ul li').index(this); $('.photo ul').animate({ left:-index*790, },10); $('.dot ul li').css('color','#fff'); $(this).css('color','#db192a'); }); }) </script> </body> </html>
以上所述是小编给大家介绍的jQuery图片轮播功能实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: