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;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 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"></span> <span class="iconfont right"></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.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图片轮播功能实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！