jQuery图片轮播功能实例代码
jquery轮播图代码如下所示：
<html>
<head>
<metahttp-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;
}
.oneulli{
list-style:none;
}
.photoul{
float:left;
position:absolute;
height:490px;
left:0px;
top:0px;
}
.photoulli{
float:left;
padding:0px;
margin:0px;
}
.arrowspan{
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;
}
.arrowspan: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;
}
.dotul{
margin:0px;
padding:0px;
}
.dotulli{
float:left;
padding:0px;
margin:0px;
margin:05px;
cursor:pointer;
}
</style>
</head>
<body>
<divclass="one">
<div>
<divclass="photo">
<ul>
<li><imgsrc="image/1.png"alt="1"/></li>
<li><imgsrc="image/2.png"alt="2"/></li>
<li><imgsrc="image/3.png"alt="3"/></li>
<li><imgsrc="image/4.png"alt="4"/></li>
<li><imgsrc="image/5.png"alt="5"/></li>
<li><imgsrc="image/6.png"alt="6"/></li>
</ul>
</div>
<divclass="arrow"><spanclass="iconfontleft">t</span><spanclass="iconfontright">Y</span></div>
<divclass="dot">
<ul>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
</div>
</div>
</div>
<scripttype="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
varulWidth=$('.photoulli').length*$('.photoulli').eq(1).width();
$('.dotulli').first().css('color','#db192a');
$('.photoul').width(ulWidth);
$('.photo,.arrowspan').hover(function(){$('.arrowspan').toggle()})
functionjdshow(){
varindex=-$('.photoul').position().left/$('.photoulli').eq(1).width();
$('.dotulli').css('color','#fff');
if(index==$('.photoulli').length-1){index=-1}
$('.dotulli').eq(index+1).css('color','#db192a');
if($('.photoul').position().left==-(ulWidth-790)){
$('.photoul').css('left','790px');//图片宽度
$('.photoul').clone().appendTo('.photo');
$('.photoul:first').remove();
}
$('.photoul').animate({
left:'-=790px',
},10);
}
setInterval(jdshow,2000);
$('.arrow.right').click(function(){
jdshow();
});
$('.arrow.left').click(function(){
/*alert($('.jd-photoul').position().left);*/
varindex=-$('.photoul').position().left/$('.photoulli').eq(1).width();
$('.dotulli').css('color','#fff');
$('.dotulli').eq(index-1).css('color','#db192a');
if($('.photoul').position().left==0){
$('.photoul').css('left',-ulWidth);
$('.photoul').clone().appendTo('.photo');
$('.photoul:first').remove();
}
$('.photoul').animate({
left:'+=790px',
},10);
});
$('.dotulli').click(function(){
varindex=$('.dotulli').index(this);
$('.photoul').animate({
left:-index*790,
},10);
$('.dotulli').css('color','#fff');
$(this).css('color','#db192a');
});
})
</script>
</body>
</html>
以上所述是小编给大家介绍的jQuery图片轮播功能实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！