jquery: 自动轮播(hover)
html:
<!-- 自动轮播 start --> <div class="home-show"> <ul class="show-list"> <li class="show-item"> <a href="" style="background: url(http://pics-house.xyfc.com/2020/1023/16034384080917127862.jpg?imageView2/1/w/1920/h/330/interlace/1/q/100) no-repeat center;"></a> </li> <li class="show-item"> <a href="" style="background:url(http://pics-house.xyfc.com/2020/1101/1604194332502739075.jpg?imageView2/1/w/1920/h/330/interlace/1/q/100) no-repeat center;"></a> </li> </ul> <ul class="dot-list"> <li class="dot-item actived"></li> <li class="dot-item"></li> </ul> </div> <!-- 自动轮播 end -->
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' }) });