<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.clearfix:before,
.clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}
body {
margin: 0;
padding: 0;
background-color: #fff;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
-webkit-box-sizing: border-box;
/* Safari */
}
body,
button,
input,
select,
textarea {
font: 14px/1.5 'Microsoft YaHei', tahoma, arial, \5b8b\4f53;
color: #333;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
#bannerWrap {
height: 452px;
position: relative;
background: #ccc;
}
#bannerWrap .bannerScroll {
height: 100%;
}
#bannerWrap .bannerScroll .imgbg {
height: 452px;
position: absolute;
right: 0px;
left: 0px;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s linear;
-moz-transition: opacity 0.8s linear;
/* Firefox 4 */
-webkit-transition: opacity 0.8s linear;
/* Safari 和 Chrome */
-o-transition: opacity 0.8s linear;
/* Opera ease*/
}
#bannerWrap .dotcontrol {
position: absolute;
width: 100%;
bottom: 20px;
text-align: center;
}
#bannerWrap .dotcontrol ul {
height: 10px;
}
#bannerWrap .dotcontrol .dotli {
width: 10px;
height: 10px;
background: #fff;
border-radius: 10px;
display: inline-block;
margin-right: 20px;
vertical-align: top;
}
#bannerWrap .dotcontrol .dotli:last-child {
margin-right: 0;
}
#bannerWrap .dotcontrol .dotli.on {
background-color: orange;
}
</style>
<script>
$(document).ready(function () {
$(".bannerScroll .imgbg").eq(0).css({ "opacity": 1 });
$(".bannerScroll .imgbg").eq(0).css({ "visibility": "visible" });
var setImgeNumad = $(".bannerScroll .imgbg").length;
var adsettimeIndex = 0;
var intervalAdOk = function () {
$('.bannerScroll .imgbg').eq(adsettimeIndex).css({ 'opacity': 0 })
$('.bannerScroll .imgbg').eq(adsettimeIndex).css({ 'visibility': 'hidden' });
adsettimeIndex++;
if (adsettimeIndex >= setImgeNumad) {
adsettimeIndex = 0;
}
$(".dotcontrol .dotli").removeClass("on");
$(".dotcontrol .dotli").eq(adsettimeIndex).addClass("on");
$(".bannerScroll .imgbg").eq(adsettimeIndex).css({ "visibility": "visible" });
$(".bannerScroll .imgbg").eq(adsettimeIndex).css({ "opacity": 1 });
}
var setbannerintervalad = setInterval(intervalAdOk, 3000);
$(".dotcontrol .dotli").hover(function () {
clearInterval(setbannerintervalad);
var index = $(this).index();
if (index != adsettimeIndex) {
$(".dotcontrol .dotli").removeClass("on");
$(this).addClass("on");
$(".bannerScroll .imgbg").eq(adsettimeIndex).css({ "opacity": 0 });
$(".bannerScroll .imgbg").eq(adsettimeIndex).css({ "visibility": "hidden" });
$(".bannerScroll .imgbg").eq(index).css({ "opacity": 1 });
$(".bannerScroll .imgbg").eq(index).css({ "visibility": "visible" });
adsettimeIndex = index
}
}, function () {
setbannerintervalad = setInterval(intervalAdOk,3000);
})
});
</script>
</head>
<body>
<div id="bannerWrap">
<div class="bannerScroll">
<div class="imgbg" style="background: url('images/b1.jpg') no-repeat center center;"></div>
<div class="imgbg" style="background: url('images/b2.jpg') no-repeat center center;"></div>
<div class="imgbg" style="background: url('images/b3.jpg') no-repeat center center;"></div>
<div class="imgbg" style="background: url('images/b4.jpg') no-repeat center center;"></div>
</div>
<div class="dotcontrol">
<ul class="clearfix">
<li class="dotli on"></li>
<li class="dotli"></li>
<li class="dotli"></li>
<li class="dotli"></li>
</ul>
</div>
</div>
</body>
</html>