html:
css:
/* 首页自动轮播 */
.home-show {
position: relative;
width: 100%;
height: 330px;
background-color: #f7f7f7;
}
.home-show .show-list .show-item {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.home-show .show-list .show-item a {
display: block;
width: 100%;
height: 330px;
}
.home-show .dot-list {
position: absolute;
bottom: 20px;
left: 50%;
}
.home-show .dot-list .dot-item {
float: left;
width: 25px;
height: 10px;
background-color: #fff;
margin: 0 5px;
cursor: pointer;
opacity: .8;
}
.home-show .dot-list .dot-item.actived {
background-color: #11a43c;
}
jquery:
(function ($) {
FCZX.globalNamespace('FCZX.Slider');
FCZX.Slider = function (opt) {
this._init(opt)
}
$.extend(FCZX.Slider.prototype, {
timer: null,
currentIndex: 0,
_init: function (opt) {
let _this = this;
_this.opt = {
sliderS: '',
dotListS: '',
dotItemS: '',
showListS: '',
showItemS: '',
}
$.extend(true, _this.opt, opt || {});
_this._initDomEvent();
return _this;
},
_initDomEvent: function () {
let _this = this;
let _opt = _this.opt;
this.$slider = $(_opt.sliderS)
this.$dotList = _this.$slider.find(_opt.dotListS);
this.$showList = _this.$slider.find(_opt.showListS);
this.$dotItem = _this.$dotList.find(_opt.dotItemS);
this.$showItem = _this.$showList.find(_opt.showItemS);
_this.$showItem.eq(_this.currentIndex).show();
this.$dotItem.on('mouseover', function () {
$(this).addClass("actived").siblings().removeClass("actived");
let index = $(this).index();
_this.currentIndex = index;
_this.$showItem.fadeOut({
duration: 500
});
_this.$showItem.eq(index).fadeIn({
duration: 500
});
});
_this.autoPlay();
this.$showList.hover(
function () {
clearInterval(_this.timer);
}, function () {
_this.autoPlay();
})
},
autoPlay: function () {
let _this = this;
_this.timer = setInterval(function () {
_this.currentIndex++;
if (_this.currentIndex > _this.$dotItem.length - 1) {
_this.currentIndex = 0
}
_this.$dotItem.eq(_this.currentIndex).trigger('mouseover')
}, 3000);
}
})
})(jQuery);
调用:
$(document).ready(function () {
new FCZX.Slider({
sliderS: '.home-show',
showListS: '.show-list',
showItemS: '.show-item',
dotListS: '.dot-list',
dotItemS: '.dot-item'
})
});
标签:jquery,opt,hover,轮播,show,function,list,currentIndex,home
来源: https://www.cnblogs.com/Nyan-Workflow-FC/p/13936891.html