一个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;
}
$(".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();
console.log(index)
var $currenttab = $(this);
if ($currenttab != $clickdottabad) {
$clickdottabad.removeClass("on");
$currenttab.addClass("on");
$clickdottabad = $currenttab;
$(".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
adsettimeIndex = index
}
}, function () {
console.log(adclickIndex, $clickdottabad, adsettimeIndex)
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>
解决方法：前面css设置了所有轮播图都隐藏
var adclickIndex = 0; // 鼠标移动到点上面的index，初始化为0
var $clickdottabad = $(".dotcontrol .dotli").eq(0); // 鼠标移动到点上面的dom节点，初始化为0
$(".bannerScroll .imgbg").eq(0).css({ "opacity": 1 }); // 第一个轮播图显示出来
$(".bannerScroll .imgbg").eq(0).css({ "visibility": "visible" }); // 第一个轮播图显示出来
var setImgeNumad = $(".bannerScroll .imgbg").length; // 轮播图的length
var adsettimeIndex = 0; // 轮播图自动播放的index，初始化为0
var intervalAdOk = function () {
$('.bannerScroll .imgbg').eq(adsettimeIndex).css({ 'opacity': 0 }) // 第一个轮播图隐藏
$('.bannerScroll .imgbg').eq(adsettimeIndex).css({ 'visibility': 'hidden' }); // 第一个轮播图隐藏
adsettimeIndex++; // 轮播图自动播放的index 加一
if (adsettimeIndex >= setImgeNumad) { // 如果轮播图的index >=4
adsettimeIndex = 0; // 轮播图的index置为0，从头开始轮播
}
$(".dotcontrol .dotli").removeClass("on"); // 全部的点移去on
$(".dotcontrol .dotli").eq(adsettimeIndex).addClass("on"); // 目前的index 加上on
$(".bannerScroll .imgbg").eq(adsettimeIndex).css({ "visibility": "visible" }); // 目前的index对应的轮播图显示
$(".bannerScroll .imgbg").eq(adsettimeIndex).css({ "opacity": 1 }); // 目前的index对应的轮播图显示
$clickdottabad = $(".dotcontrol .dotli").eq(adsettimeIndex); // 鼠标移动到点上面的dom节点，改为和现在播放的index一致的dom节点
adclickIndex = adsettimeIndex; // 轮播图自动播放的index，改为和现在播放的index一致的
}
var setbannerintervalad = setInterval(intervalAdOk, 3000); // 每3秒执行一次这个函数
$(".dotcontrol .dotli").hover(function () { // 点移入移出
clearInterval(setbannerintervalad); // 移入的时候清除定时器
var index = $(this).index(); // 获取此时的index
console.log(index)
var $currenttab = $(this); // 获取此时的dom节点
if ($currenttab != $clickdottabad) { // 如果此时的dom节点不等于自动播放到的dom节点
$clickdottabad.removeClass("on"); // 自动播放的dom节点移出on
$currenttab.addClass("on"); // 此时的dom节点增加on
$clickdottabad = $currenttab; // 把此时的dom节点给自动播放的dom节点
$(".bannerScroll .imgbg").eq(adclickIndex).css({ "opacity": 0 }); // 自动播放的index对应的图片隐藏
$(".bannerScroll .imgbg").eq(adclickIndex).css({ "visibility": "hidden" }); // 自动播放的index对应的图片隐藏
$(".bannerScroll .imgbg").eq(index).css({ "opacity": 1 }); // 此时的index对应的图片显示
$(".bannerScroll .imgbg").eq(index).css({ "visibility": "visible" }); // 此时的index对应的图片显示
adclickIndex = index // 把此时的index赋值给鼠标移动到点上面的index
adsettimeIndex = index // 把此时的index赋值给轮播图自动播放的index
}
}, function () {
console.log(adclickIndex, $clickdottabad, adsettimeIndex)
setbannerintervalad = setInterval(intervalAdOk,3000); // 启动定时器
})
