jQuery无缝轮播

来源：互联网发布：软件模块间接口编辑：程序博客网时间：2024/06/09 19:51

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>无缝轮播</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.banner{
margin: 100px auto;
border: 5px solid #000;
width: 550px;
height: 300px;
overflow: hidden;
position: relative;
}
img{
width:550px;
height:300px;
}
.banner .img{
width: 5000px;
position: absolute;
left: 0;
top: 0;
}
.banner .img li{
float: left;
}
.banner .num{
position: absolute;
width: 100%;
bottom: 10px;
left: 0;
text-align: center;
font-size: 0;
}
.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: #f60;
}
.banner .btn{
width: 30px;
height: 50px;
line-height: 50px;
background: rgba(0,0,0,.3);
position: absolute;
top: 50%;
margin-top: -25px;
cursor: pointer;
text-align: center;
font-size: 40px;
font-family: "宋体";
color: #fff;
display: none;
}
.banner:hover .btn{
display:block;
}
.banner .btn_l{
left: 0;
}
.banner .btn_l:hover,.banner .btn_r:hover{
background:rgba(0,0,0,0.5);
}
.banner .btn_r{
right: 0;
}
</style>
</head>
<body>
<div class="banner">
<ul class="img">
<li><a href="#"><img src="img/1.png" alt=""/></a></li>
<li><a href="#"><img src="img/2.png" alt=""/></a></li>
<li><a href="#"><img src="img/3.png" alt=""/></a></li>
<li><a href="#"><img src="img/4.png" alt=""/></a></li>
</ul>
<ul class="num">

</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
<script src="jquery-1.11.3.js"></script>
<script>
$(function(){
var i = 0;
var clone = $('.banner .img li').first().clone();

$('.banner .img ').append(clone);
var size = $('.banner .img li').size();
debugger
for(var j=0;j<size-1;j++){
$('.banner .num').append("<li></li>");
}
$('.num li').first().addClass('on');

//鼠标滑入圆点
$('.banner .num li').hover(function(){
var index = $(this).index();
i = index;
$('.banner .img').stop().animate({left:-index*550},500);
$(this).addClass('on').siblings().removeClass("on");
});

//自动轮播
var t = setInterval(function(){
i++;
move();
},2000);

//对于banner定时器的操作
$('.banner').hover(function(){
clearInterval(t);
},function(){
t = setInterval(function(){
i++;
move();
},2000)
});

function move(){
if(i==size){
$('.banner .img').css({left:0});
i = 1;
}
if(i==-1){
$('.banner .img').css({left:-(size-1)*550});
i = size-1;
}
$('.banner .img').stop().animate({left:-i*550},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");
}
}
//向右的按钮
$('.banner .btn_r').click(function () {
i--;
move();
});
//向左的按钮
$('.banner .btn_l').click(function () {
i++;
move();
});
})
</script>
</body>
</html>

阅读全文

0 0