html列表自动轮播,jquery: 自动轮播（hover）

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