jQuery图片轮播功能实例代码
网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章给大家介绍了jquery 图片轮播代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
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; :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; :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; :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 class="one"> <div> <div class="photo"> <ul> <li><img src="image/1.png" alt="1" /></li> <li><img src="image/2.png" alt="2" /></li> <li><img src="image/3.png" alt="3" /></li> <li><img src="image/4.png" alt="4" /></li> <li><img src="image/5.png" alt="5" /></li> <li><img src="image/6.png" alt="6" /></li> </ul> </div> <div class="arrow"><span class="iconfont left">t</span> <span class="iconfont right">Y</span></div> <div class="dot"> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> </div> <script type="text/javascript" src="http://code.jquery./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图片轮播功能实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,长沙网络推广会及时回复大家的!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程