一个jquery轮播图
Posted 耿鑫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个jquery轮播图相关的知识，希望对你有一定的参考价值。
<!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 () {
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>
以上是关于一个jquery轮播图的主要内容，如果未能解决你的问题，请参考以下文章