无缝轮播图JQ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul,li,ol,div,body{
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.banner{
width: 100%;
height: 380px;
position: relative;
overflow: hidden;
}
.banner ul {
width: 600%;
height: 380px;
position: absolute;
left: 0;
top: 0;
background: #ccc;
z-index: 1;
}
.banner ul li{
width:16.66%;
height:380px;
float:left;
background:url(images/1.jpg) no-repeat center center;
font-size: 200px;
text-align: center;
}
.dir{
width: 980px;
margin: 0 auto;
position: relative;
color: #fff;
}
.dir span{
float: left;
font-size: 200px;
margin-top: 80px;
cursor: pointer;
}
.dir span:nth-of-type(2){
float: right;
}
.banner:hover div{
z-index: 2;
}
ol{
width: 200px;
height: 20px;
position: absolute;
left: 40%;
bottom: 20px;
z-index: 3;
}
ol li {
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
float: left;
margin-left: 15px;
cursor: pointer;
line-height: 20px;
text-align: center;
}
ol li.cur{
background: orange;
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="dir">
<span><</span>
<span>></span>
</div>
<ol>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
//创建一个新的标签
var newTag = $('<li></li>');
//插入ul内部
$('ul').prepend(newTag);
var len = $('ul li').length -1;
//循环设置背景图
$('ul li').each(function(index, el) {
index = index%len + 1;
$(el).css({
background: 'url(images/'+index+'.jpg) no-repeat center center'
});
});
var num = 0 , loop = 0, timer = null;
//自动播放
autoPlay();
function autoPlay(){
clearInterval(timer);
timer = setInterval(function(){
goRight();
},2000);
}
//鼠标移上静止，移出继续播放
$('.banner').hover(function() {
clearInterval(timer);
}, function() {
autoPlay();
});
//鼠标移上圆圈 切换图片
$('ol li').mouseenter(function(event) {
var index = $(this).index();
$(this).addClass('cur').siblings('li').removeClass('cur');
$('ul').css({left:-index*100+"%"});
});
//向右滚动
function goRight(){
//num 控制css 背景图
// loop 控制运动
num++,loop++ ;
if(loop > len){
num = 0;
loop = 1;
$('ul').css({left:-num*100+"%"});
}
$('ol li').eq(loop%len).addClass('cur').siblings('li').removeClass('cur');
$('ul').stop().animate({left:-loop*100+"%"});
}
//向左滚动
function goLeft(){
//num 控制css 背景图
// loop 控制运动
num--,loop-- ;
if(loop < 0){
num = len;
loop = len - 1;
$('ul').css({left:-num*100+"%"});
}
$('ol li').eq(loop%len).addClass('cur').siblings('li').removeClass('cur');
$('ul').stop().animate({left:-loop*100+"%"});
}
$('.dir span:eq(0)').click(function(event) {
//点击向左
goLeft();
});
$('.dir span:eq(1)').click(function(event) {
//点击向右
goRight();
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号