solly793755670 通过本文主要向大家介绍了jQuery轮播图代码,jQuery无缝轮播图,jQuery轮播图片等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文实例为大家分享了jQuery无缝轮播图的具体代码，供大家参考，具体内容如下
html 代码
<div class="banner"> <ul class="img"> <li><a href="#"><img src="image/1.jpg"></a></li> <li><a href="#"><img src="image/2.jpg"></a></li> <li><a href="#"><img src="image/3.jpg"></a></li> <li><a href="#"><img src="image/4.jpg"></a></li> </ul> <ul class="num"> </ul> <div class="btn btn_l"><</div> <div class="btn btn_r">></div> </div>
jq代码
$(function(){
var i=0;
var clone=$(".banner .img li").first().clone();
$(".banner .img").append(clone);
var size = $(".banner .img li").size();
for(var j=0;j<size-1;j++){
$(".banner .num").append("<li></li>");
}
$(".banner .num li").first().addClass('on');
//鼠标划入圆点
$(".banner .num li").hover(function(){
var index=$(this).index();
i=index;
$(".banner .img").stop().animate({left:-index*1000},500);
$(this).addClass('on').siblings().removeClass('on');
})
/*自动轮播*/
var t=setInterval(function(){
i++;
move();
},2000);
//对banner定时器的操作
$(".banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(move,2000);
})
/*向左按钮*/
$(".banner .btn_l").click(function(){
i++;
move();
})
/*向右按钮*/
$(".banner .btn_r").click(function(){
i--;
move();
})
function move(){
if(i==size){
$(".banner .img").css({left:0});
i=1;
}
if(i==-1){
$(".banner .img").css({left:-(size-1)*1000});
i=size-2;
}
$(".banner .img").stop().animate({left:-i*1000},500);
if(i==size-1){
$(".banner .num li").eq(0).addClass('on').siblings().removeClass('on');
}else{
$(".banner .num li").eq(i).addClass('on').siblings().removeClass('on');
}
}
})
style 样式
<style>
*{padding:0;margin:0;list-style: none;}
.banner{
margin:100px auto;
border:5px solid #000;
width:1000px;
height:640px;
position: relative;
overflow: hidden;
}
.banner .img{
width:5000px;
position: absolute;
left:0px;
top:0px;
}
.banner .img li{
float:left;
}
.banner .num{
position:absolute;
width:100%;
bottom:20px;
left:0px;
text-align: center;
font-size: 0px;
}
.banner .num li{
width:10px;
height:10px;
background: #888;
border-radius: 50%;
display: inline-block;
margin:0 3px;
cursor: pointer;
}
.banner .num li.on{
background: #f00;
}
.banner .btn{
width:30px;
height:50px;
background: rgba(0,0,0,0.5);
position:absolute;
top:50%;
margin-top:-25px;
cursor: pointer;
text-align: center;
line-height: 50px;
color:#fff;
font-size: 40px;
font-family: "宋体";
display: none;
}
.banner:hover .btn{
display: block;
}
.banner .btn_l{
left:0px;
}
.banner .btn_r{
right:0px;
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。