JQuery实现自定义轮播图

自定义轮播图实现

一、效果预览

使用HTML+CSS+JQuery实现一个功能齐全的轮播图，效果如下：

二、源代码

使用前需要引入以下JS脚本:

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>

说明：jquery.lazyload.js是图片懒加载技术，详细使用说明请继续关注本博主。

1.html

<!-- 轮播图开始 -->
<div class="banner">
        <div class="swiper">
            <ul>
                <li>
                    <img src="holder.js/1920x570?text=hime" data-original="http://localhost/images/2018/07/29/1532840363279173.jpg">
                </li>
                <li>
                    <img src="holder.js/1920x570?text=hime" data-original="http://localhost/images/2018/07/29/1532840449999101.jpg">
                </li>
            </ul>
        </div>
        <div class="tap">
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="btn">
            <a class="prev">
                <i></i>
            </a>
            <a class="next">
                <i></i>
            </a>
        </div>
    </div>

2、CSS

.banner {
    width: 100%;
    position: relative;
    top: 50px;
}

.banner .swiper ul li {
    position: absolute;
}

.banner .tap {
    position: relative;
    text-align: center;
    top: 540px;
}

.banner .tap ul li {
    display: inline-block;
    background: rgba(128, 128, 128, 0.2);
    width: 50px;
    height: 2px;
    border-radius: 20px;
    cursor: pointer;
}

.banner .tap .on {
    background-color: #710093;
}

.banner .btn {
    position: relative;
    display: none;
}

.banner .btn .prev {
    float: left;
    width: 74px;
    height: 74px;
    margin: 248px;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 30pt;
    color: #fff;
    text-align: center;
    line-height: 74px;
    cursor: pointer;
}

.banner .btn .prev i {
    display: block;
    width: 28px;
    height: 51px;
    margin-top: 13px;
    margin-left: 24px;
    color: #fff;
    background: url(../img/icon/icon.png) no-repeat 0 0px;
}

.banner .btn .next {
    float: right;
    width: 74px;
    height: 74px;
    margin: 248px;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 30pt;
    color: #fff;
    text-align: center;
    line-height: 74px;
    cursor: pointer;
}

.banner .btn .next i {
    display: block;
    width: 28px;
    height: 51px;
    margin-top: 13px;
    margin-left: 24px;
    color: #fff;
    background: url(../img/icon/icon.png) no-repeat -32px 0;
}

3、JS代码

var banner = {
    properties: {
        index: 0,
        sleep: 3000,
        fadeTime: 300,
        timer: null
    },
    init: function () {
        $('.swiper li').eq(0).show().siblings().hide();
        $('.tap li').eq(0).addClass('on').siblings().removeClass('on');
        if (banner.properties.timer == null) {
            banner.start();
        }
        banner.prevBtn();
        banner.nextBtn();
        banner.onHover();
    },
    start: function () {
        banner.properties.timer = setInterval(function () {
            banner.properties.index ++;
            if (banner.properties.index > banner.size()) {
                banner.properties.index = 0;
            }
            banner.show();
        }, banner.properties.sleep);
    },
    stop: function () {
        clearInterval(banner.properties.timer);
    },
    show: function () {
        $('.swiper li').eq(banner.properties.index).fadeIn(banner.properties.fadeTime).siblings().fadeOut(banner.properties.fadeTime);
        $('.tap li').eq(banner.properties.index).addClass('on').siblings().removeClass('on');
    },
    size: function () {
        return $('.swiper li').length;
    },
    prevBtn: function () {
        $('.btn .prev').click(function () {
            banner.stop();
            if (banner.properties.index == 0) {
                banner.properties.index = banner.size();
            }
            banner.properties.index --;
            banner.show();
            banner.start();
        });
    },
    nextBtn: function () {
        $('.btn .next').click(function () {
            banner.stop();
            if (banner.properties.index == banner.size() - 1) {
                banner.properties.index = -1;
            }
            banner.properties.index ++;
            banner.show();
            banner.start();
        });
    },
    onHover: function () {
        $('.tap li').hover(function () {
            banner.properties.index = $(this).index();
            banner.show();
            if (banner.properties.timer != null) {
                banner.stop();
            }
        }, function () {
            banner.start();
        });
        $('.banner').hover(function () {
            $('.btn').show();
        }, function () {
            $('.btn').hide();
        });
    }
}
banner.init();