轮播图老是用插件怎么行,简易的jQuery无缝轮播!
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="UTF-8">
<title> slider </title>
<style>
html,
body {
height: 100%;
width: 100%;
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
.banner {
margin: auto;
width: 65.85rem;
height: 28.35rem;
overflow: hidden;
position: relative;
}
.banner .imgs {
width: 600%;
height: 100%;
position: absolute;
}
.banner .imgs img {
width: 65.85rem;
height: 28.35rem;
float: left;
}
.banner .btn span {
display: inline-block;
width: 4em;
height: 5em;
line-height: 5em;
font-size: 2em;
opacity: 0.5;
background: #ccc;
color: #fff;
text-align: center;
position: absolute;
top: 11.67em;
left: 0;
}
.banner .btn .next {
left: 61.85rem;
}
.banner .horse {
position: absolute;
bottom: 0;
left: 25.42rem;
}
.banner .horse span {
display: block;
float: left;
width: 1rem;
height: 1rem;
border-radius: 50% 50%;
margin: 1rem;
background: yellow;
}
.banner .horse .active {
background: #c60023;
}
</style>
</head>
<meta charset="UTF-8">
<title> slider </title>
<style>
html,
body {
height: 100%;
width: 100%;
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
.banner {
margin: auto;
width: 65.85rem;
height: 28.35rem;
overflow: hidden;
position: relative;
}
.banner .imgs {
width: 600%;
height: 100%;
position: absolute;
}
.banner .imgs img {
width: 65.85rem;
height: 28.35rem;
float: left;
}
.banner .btn span {
display: inline-block;
width: 4em;
height: 5em;
line-height: 5em;
font-size: 2em;
opacity: 0.5;
background: #ccc;
color: #fff;
text-align: center;
position: absolute;
top: 11.67em;
left: 0;
}
.banner .btn .next {
left: 61.85rem;
}
.banner .horse {
position: absolute;
bottom: 0;
left: 25.42rem;
}
.banner .horse span {
display: block;
float: left;
width: 1rem;
height: 1rem;
border-radius: 50% 50%;
margin: 1rem;
background: yellow;
}
.banner .horse .active {
background: #c60023;
}
</style>
</head>
<body>
<div class="banner">
<div class="imgs">
<img src="img/banner1.jpg">
<img src="img/banner2.jpg">
<img src="img/banner3.jpg">
<img src="img/banner4.jpg">
<img src="img/banner5.jpg">
</div>
<div class="btn">
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<div class="horse">
<span rel="1" class="active"></span>
<span rel="2"></span>
<span rel="3"></span>
<span rel="4"></span>
<span rel="5"></span>
</div>
</div>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
var page = {
init: function() {
this.onload();
},
onload: function() {
var index = 0;
var timer = null;
var imgFirst = $(".imgs img:first").clone();//将第一张图片复制
$(".imgs").append(imgFirst);//将所复制的一图添加到最后,共六张图
<div class="banner">
<div class="imgs">
<img src="img/banner1.jpg">
<img src="img/banner2.jpg">
<img src="img/banner3.jpg">
<img src="img/banner4.jpg">
<img src="img/banner5.jpg">
</div>
<div class="btn">
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<div class="horse">
<span rel="1" class="active"></span>
<span rel="2"></span>
<span rel="3"></span>
<span rel="4"></span>
<span rel="5"></span>
</div>
</div>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
var page = {
init: function() {
this.onload();
},
onload: function() {
var index = 0;
var timer = null;
var imgFirst = $(".imgs img:first").clone();//将第一张图片复制
$(".imgs").append(imgFirst);//将所复制的一图添加到最后,共六张图
function animate() {
var width_ = $(".imgs img:first").width();//获取每张图片的宽度
if(index == 6) {
index = 1;$(".imgs").css("left", 0);//轮播到第六张图片时设置index便于跑马灯的同步,并将left归0,完成衔接
}
$(".imgs").animate({ left: -index * width_ + "px" }, 200, "linear");
if(index == 5) {
$(".horse span").removeClass("active").eq(0).addClass("active");//由于index=5时展示图片为第一张(实为复制的那一张,第六张)跑马灯需设置同步
} else {
$(".horse span").removeClass("active").eq(index).addClass("active");
}
};
$(".imgs,.btn,.horse").mouseover(function() {
clearInterval(timer);
});
$(".imgs,.btn,.horse").mouseout(function() {
timer = setInterval(function() {
index++;
animate();
//console.log(index);
}, 2000)
})
$(".horse span").mouseover(function(){
index = $(this).attr("rel")-1;
//alert(index)
animate();
});
// $(".next").click(function() {
// index++;
// animate();
// });
// $(".prev").click(function() {
// index--;
// if(index < 0)index = 4;
// animate();
// });
$(".btn span").click(function(){
if($(this).hasClass("next")){
index++;
}else{
index--;if(index < 0)index = 4;
};
animate();
})
timer = setInterval(function() {
index++;
animate();
//console.log(index);
}, 2000)
}
};
$(function() {
page.init();
})
</script>
var width_ = $(".imgs img:first").width();//获取每张图片的宽度
if(index == 6) {
index = 1;$(".imgs").css("left", 0);//轮播到第六张图片时设置index便于跑马灯的同步,并将left归0,完成衔接
}
$(".imgs").animate({ left: -index * width_ + "px" }, 200, "linear");
if(index == 5) {
$(".horse span").removeClass("active").eq(0).addClass("active");//由于index=5时展示图片为第一张(实为复制的那一张,第六张)跑马灯需设置同步
} else {
$(".horse span").removeClass("active").eq(index).addClass("active");
}
};
$(".imgs,.btn,.horse").mouseover(function() {
clearInterval(timer);
});
$(".imgs,.btn,.horse").mouseout(function() {
timer = setInterval(function() {
index++;
animate();
//console.log(index);
}, 2000)
})
$(".horse span").mouseover(function(){
index = $(this).attr("rel")-1;
//alert(index)
animate();
});
// $(".next").click(function() {
// index++;
// animate();
// });
// $(".prev").click(function() {
// index--;
// if(index < 0)index = 4;
// animate();
// });
$(".btn span").click(function(){
if($(this).hasClass("next")){
index++;
}else{
index--;if(index < 0)index = 4;
};
animate();
})
timer = setInterval(function() {
index++;
animate();
//console.log(index);
}, 2000)
}
};
$(function() {
page.init();
})
</script>
</html>