<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 () { var adclickIndex = 0; var $clickdottabad = $(".dotcontrol .dotli").eq(0); $(".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; } console.log(adsettimeIndex) $(".dotcontrol .dotli").removeClass("on"); $(".dotcontrol .dotli").eq(adsettimeIndex).addClass("on"); $(".bannerScroll .imgbg").eq(adsettimeIndex).css({ "visibility": "visible" }); $(".bannerScroll .imgbg").eq(adsettimeIndex).css({ "opacity": 1 }); $clickdottabad = $(".dotcontrol .dotli").eq(adsettimeIndex); adclickIndex = adsettimeIndex; } var setbannerintervalad = setInterval(intervalAdOk, 3000); $(".dotcontrol .dotli").hover(function () { clearInterval(setbannerintervalad); var index = $(this).index(); var $currenttab = $(this); // console.log(index, $currenttab) if ($currenttab != $clickdottabad) { $clickdottabad.removeClass("on"); } $currenttab.addClass("on"); $clickdottabad = $currenttab; if (index != adclickIndex) { $(".bannerScroll .imgbg").eq(adclickIndex).css({ "opacity": 0 }); $(".bannerScroll .imgbg").eq(adclickIndex).css({ "visibility": "hidden" }); $(".bannerScroll .imgbg").eq(index).css({ "opacity": 1 }); $(".bannerScroll .imgbg").eq(index).css({ "visibility": "visible" }); adclickIndex = 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>