一个jquery轮播图
2021-02-18 19:20
阅读：759
YPE >
标签：file dev inline list clear hid box range margin
html>
.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;
}
$(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);
})
});
一个jquery轮播图
标签：file dev inline list clear hid box range margin
原文地址：https://www.cnblogs.com/gengxinnihaoma/p/12938670.html
评论
亲，登录后才可以留言！