<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.0.js"></script>
<style>
*{ margin: 0; padding: 0;}
.banner{width: 1080px; height: 432px; position: relative; overflow: hidden; margin: 50px auto;}
.box{ width: 4320px; height: 432px; }
.box div{ float: left;}
.but div{ position: absolute; top: 200px; cursor: pointer; padding: 5px 15px; font-size: 25px; background-color: rgba(102,215,255,0.5); color: white; z-index: 2;}
.next{ right: 50px;}
.prev{ left: 50px;}
.Dots{ position: absolute; bottom: 30px; right: 50px;}
.Dots a{ padding: 1px 9px; background-color: rgba(102,215,255,0.7); margin-left: 8px; border-radius: 50%;}
.Dots a.active{ background-color: white;}
</style>
</head>
<body>
<div class="banner">
<!--img-->
<div class="box">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
</div>
<!--Dots-->
<div class="Dots"></div>
<!--next-prev-->
<div class="but">
<div class="prev">Prev</div>
<div class="next">Next</div>
</div>
</div>
<script>
var index = 0;
var Numn = "";
//获取图片的个数
var imgNum = $(".box").find('img').length;
//获取每张图片的宽度
var imgWidth = $(".box").find('img').width();
//计算所有图片的宽度
var AllImgWidth = imgNum*imgWidth;
// alert(AllImgWidth);
function selectimg(index) {
$(".box").animate({"margin-left":"-" + imgWidth*index + "px"},600);
$(".Dots a").eq(index).addClass("active").siblings('a').removeClass('active');
}
//点击prev的按钮
$(".but .prev").click(function(){
index -= 1;
if(index < 0){
index = imgNum - 1;
}
selectimg(index);
});
//点击next按钮
$(".but .next").click(function(){
index += 1;
if( index > 3){
index = 0;
}
selectimg(index);
});
//鼠标放上去暂停轮播
$('.banner').hover(function(){
clearInterval(p);
},function () {
pic();
});
//自动轮播
// 1、轮播切换图片函数,不断的改变index的值
// 2、然后乘以宽度(总宽度)
function pic(){
p = setInterval(function(){
index++;
if(index >= imgNum){
index = 0;
}
selectimg(index);
},5000);
}
//获取按钮的个数;向页面添加按钮
for(var icon = 0; icon < imgNum; icon++){
Numn +="<a href='javascript:;'></a>";
}
$('.Dots').html(Numn);
$('.Dots a').eq(0).addClass('active');
//点击.Dots a切换到对应的图
$(".Dots a").each(function(index){
$(this).click(function(){
$('.box').animate({'margin-left':'-' + imgWidth*index + 'px'},600);
$(".Dots a").eq(index).addClass("active").siblings("a").removeClass("active");
})
});
pic();
</script>
</body>
</html>
JQuery banner轮播
最新推荐文章于 2019-08-02 17:51:27 发布