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

# jquery # 图片轮播 # 很棒的一组js图片轮播特效 # 原生js实现无缝轮播图效果 # JavaScript实现大图轮播效果 # 原生JS实现图片轮播效果 # 基于vue.js实现图片轮播效果 # 原生JS实现匀速图片轮播动画 # JS实现焦点图轮播效果的方法详解 # 微信小程序 swiper组件轮播图详解及实例 # 原生js实现无限循环轮播图效果 # flexslider.js实现移动端轮播 # 小编 # 给大家 # 所示 # 所述 # 给我留言 # 有任何 # li # hidden # ul # list # absolute # photo # width # top # overflow # height # background # center # align # rgba

返回目录在线咨询

上一篇：在线取名小程序制作网站有哪些,小程序名字取名创意？
下一篇：C#怎么使用结构体struct C# struct与class的区别和使用方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jQuery图片轮播功能实例代码

您的项目需求