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'
    })
});