<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style>
*{
margin:0;
padding: 0;
}
.banner_wrap{
width: 780px;
height: 231px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.banner{
width: 5460px;
height: 231px;
list-style: none;
margin-left: -780px;
}
.banner li{
float: left;
width: 780px;
height: 231px;
}
.prev{
left:0;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.next{
right:0;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.arrows{
position: absolute;
margin-top: -35px;
background: rgba(205,205,205,0.6);
width: 35px;
height:70px;
top:50%;
font-size: 18px;
color: #fff;
text-align: center;
line-height: 70px;
cursor: pointer;
}
.round_wrap{
width: 125px;
position: absolute;
bottom: 20px;
left:50%;
margin-left: -62px;
list-style: none;
cursor: pointer;
}
.round_wrap li{
width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(230,230,230,0.7);
float: left;
margin-left: 10px;
}
.round_wrap li.now{
background: rgba(50,50,50,0.9);
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('.banner_wrap').hover(function () {
$('.arrows').css('background',' rgba(205,205,205,0.9)');
clearInterval(repeat)
},function () {
$('.arrows').css('background',' rgba(205,205,205,0.6)');
repeat = setInterval(function () {
if($('.banner:not(:animated)').length>0) {
scrollIndex++;
scrollMove()
}
},2000);
});
var prev=$('.prev'),
next=$('.next'),
banner=$('.banner'),
scrollIndex=1,
elWidth = 780;
next.click(function () {
if($('.banner').not(":animated").length>0) {
scrollIndex++;
scrollMove()
}
});
prev.click(function () {
if($('.banner:not(:animated)').length>0) {
scrollIndex++;
scrollMove()
}
});
function scrollMove() {
banner.animate({
'marginLeft':-scrollIndex*elWidth+'px'
},500,function () {
if(scrollIndex==6){
scrollIndex=1;
banner.css('margin-left',-elWidth+'px');
}
if(scrollIndex==0){
scrollIndex=5;
banner.css('margin-left','-3900px');
}
$('.round_wrap li').eq(scrollIndex-1).addClass('now').siblings().removeClass('now')
});
}
var repeat = setInterval(function () {
if($('.banner:not(:animated)').length>0) {
scrollIndex++;
scrollMove()
}
},2000);
$('.round_wrap li').click(function () {
scrollIndex = $(this).index()+1;
scrollMove()
})
})
</script>
</head>
<body>
<div class="banner_wrap">
<div class="prev arrows"><</div>
<div class="next arrows">></div>
<ul class="banner">
<li><img src="imasges/article_image09.jpg"/></li>
<li><img src="imasges/article_image05.jpg"/></li>
<li><img src="imasges/article_image06.jpg"/></li>
<li><img src="imasges/article_image07.jpg"/></li>
<li><img src="imasges/article_image08.jpg"/></li>
<li><img src="imasges/article_image09.jpg"/></li>
<li><img src="imasges/article_image05.jpg"/></li>
</ul>
<ul class="round_wrap">
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
