jQuery图片轮播功能实例代码

2019-11-19 17:46:35

字体：大中小

来源：转载

供稿：网友

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

上一篇：Javascript中带名匿名箭头函数的重要区别(推荐)

下一篇：jQuery代码实现实时获取时间