html代码
<div class="lunbo">
<div class="container">
<div class="lunbolist">
<div class="swrapper" style="left:0px;">
<img class="scrollImg ac" src="img/bannerback.jpg">
<img class="scrollImg ac" src="img/bannerback2.jpg">
<img class="scrollImg ac" src="img/bannerback3.jpg">
<img class="scrollImg ac" src="img/bannerback4.jpg">
<img class="scrollImg ac" src="img/bannerback5.jpg">
</div>
<!-- 如果需要分页器 -->
<div class="spagination">
<a href="javascript:;" index="1" name="first"></a>
<a href="javascript:;" index="2"></a>
<a href="javascript:;" index="3"></a>
<a href="javascript:;" index="4"></a>
<a href="javascript:;" index="5"></a>
</div>
<a class="sbutton-prev"><i class="iconfont ileft"></i></a>
<a class="sbutton-next "><i class="iconfont"></i></a>
</div>
</div>
</div>
css代码
.container {
margin: 0 auto;
width: 1226px;
position: relative;
/* border: 1px solid black; */
}
.lunbo .lunbolist {
width: 1226px;
height: 460px;
/* display:flex; */
overflow: hidden;
position: relative;
}
.lunbo .lunbolist .swrapper {
height: 460px;
position: absolute;
/* left:0px; */
width: 30000px;
z-index: 2;
}
.lunbo .lunbolist .scrollImg {
width: 1226px;
height: 460px;
float: left;
/* display: block; */
z-index: 100;
}
/* 分页器 */
.spagination {
width: 400px !important;
/* left: auto !important; */
right: 30px !important;
bottom: 20px !important;
text-align: right !important;
position: absolute;
z-index: 2;
}
.spagination a {
cursor: pointer;
display: inline-block;
width: 6px;
height: 6px;
border: 2px solid #fff;
border-color: rgba(247, 243, 243, 0.8);
border-radius: 10px;
background-color: black;
margin-right: 5px;
}
.spagination .active {
border-color: grey;
background-color: white;
}
.sbutton-prev {
position: absolute;
top: 50%;
width: 41px;
height: 69px;
margin-top: -35px;
vertical-align: center;
z-index: 2;
outline: none;
left: 234px !important;
line-height: 69px;
display: inline-block;
text-align: center;
}
.sbutton-prev:hover {
background-color: #5f5750;
opacity: 0.5;
color: white;
}
.sbutton-next {
position: absolute;
top: 50%;
width: 41px;
height: 69px;
margin-top: -35px;
z-index: 2;
cursor: pointer;
outline: none;
right: 0;
line-height: 69px;
vertical-align: center;
display: inline-block;
text-align: center;
}
.sbutton-next:hover {
background-color: #5f5750;
opacity: 0.5;
color: white;
}
Jquery代码
<script>
var index = 0;
var setTime;
// 自动播放
autoNextPage();
function autoNextPage() {
setTime = setInterval(function() {
nextButton(true);
}, 3000);
}
// 鼠标移入,停止自动播放
$(".lunbolist").mouseover(function() {
clearInterval(setTime);
});
// 鼠标移出,开始自动播放
$(".lunbolist").mouseout(function() {
autoNextPage();
})
// 上一页
$(".sbutton-prev").click(function() {
clearInterval(setTime);
nextButton(false);
})
// 下一页
$(".sbutton-next").click(function() {
clearInterval(setTime);
nextButton(true);
})
var buttonnum = $('.spagination a');
// 分页器点击事件
buttonnum.on('click', function() {
clearInterval(setTime)
var j = $(this).attr('index') - 1
var leftlength = -1226 * j;
f(leftlength)
$(this).attr('class', 'active')
// 置当前点击的小圆点的类名为active
})
// 分页器每个小圆点都失去active类与对应图片显示
function f(leftlength) {
for (var i = 0; i < 5; i++) {
$('.spagination a').eq(i).attr('class', '')
}
$('.swrapper').animate({
left: leftlength + 'px'
});
}
// 判断是要上一页还是下一页
function nextButton(next) {
var leftlength = 0;
if (next) {
// 往后走
if (index == 5) {
leftlength = 0;
index = 1;
} else {
index++;
}
leftlength = -1226 * (index - 1);
} else {
// 往前走
if (index == 1) {
index = 5;
} else {
index--;
}
leftlength = -1226 * (index - 1);
}
f(leftlength)
$('.spagination a').eq(index - 1).attr('class', 'active')
}
</script>
轮播页面展示
注意引入自己的图片资源和Jquery,上一页下一页的图标是使用的iconfont