js实现轮播图

html

 <div class="swiper_wrapper J_swiper_wrapper">
        <ul class="swiper_container">
            <li class="swiper_item current">
                <img src="./img/1.jpg" alt="">
            </li>
            <li class="swiper_item">
                <img src="./img/2.jpg" alt="">
            </li>
            <li class="swiper_item">
                <img src="./img/3.jpg" alt="">
            </li>
        </ul>
        <div class="btn_group">
            <div class="btn prev_btn J_prev_btn">&lt;</div>
            <div class="btn next_btn J_next_btn">&gt;</div>
        </div>
        <ul class="dots_wrapper">
            <li class="dot_item current"></li>
            <li class="dot_item"></li>
            <li class="dot_item"></li>
        </ul>
 </div>

css

html,
body {
    margin: 0;
    padding: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.swiper_wrapper {
    position: relative;
    width: 500px;
    height: 320px;
    margin: 0 auto;
}

.swiper_container {
    position: relative;
    height: 100%;
}

.swiper_item {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    height: 100%;
    transition: all 1s;
}

.swiper_item.current {
    opacity: 1;
}

.swiper_item img {
    width: 100%;
    height: 100%;
}

.btn {
    display: none;
    position: absolute;
    z-index: 10;
    width: 50px;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
    font-weight: 700;
    color: #ccc;
    text-align: center;
    background-color: rgba(0, 0, 0, .2);
    margin-top: -40px;
    cursor: pointer;
}

.prev_btn {
    left: 0;
    top: 50%;
}

.next_btn {
    right: 0;
    top: 50%;
}

.dots_wrapper {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.dot_item {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(115, 115, 115, .4);
    cursor: pointer;
}

.dot_item.current {
    background-color: #b1b1b1;
}

js

; (function (doc) {
    var oWrap = doc.getElementsByClassName('J_swiper_wrapper')[0]
    var oSwiperItem = doc.getElementsByClassName('swiper_item')
    var oPrevBtn = doc.getElementsByClassName('J_prev_btn')[0]
    var oNextBtn = doc.getElementsByClassName('J_next_btn')[0]
    var oDots = doc.getElementsByClassName('dots_wrapper')[0]
    var oDotItem = doc.getElementsByClassName('dot_item')
    var currentIndex = 0
    var timer = null
    var init = function () {
        bindEvent()
        play()
    }

    function bindEvent() {
        oWrap.addEventListener('mouseover', oWrapMouseover, false)
        oWrap.addEventListener('mouseleave', oWrapMouseleave, false)
        oPrevBtn.addEventListener('click', oPrevBtnClick, false)
        oNextBtn.addEventListener('click', oNextBtnClick, false)
        oDots.addEventListener('click', oDotsClick, false)
    }

    function play() {
        timer = setInterval(function () {
            if (currentIndex >= oSwiperItem.length - 1) {
                currentIndex = 0
            } else {
                currentIndex++
            }
            changeCurrent(currentIndex)
        }, 3000)
    }

    function changeCurrent(index) {
        for (var i = 0; i < oDotItem.length; i++) {
            oSwiperItem[i].className = 'swiper_item'
            oDotItem[i].className = 'dot_item'
        }
        oSwiperItem[index].className = 'swiper_item current'
        oDotItem[index].className = 'dot_item current'
    }

    function oWrapMouseover(e) {
        oPrevBtn.style.display = 'block'
        oNextBtn.style.display = 'block'
        clearInterval(timer)
        timer = null
    }

    function oWrapMouseleave() {
        oPrevBtn.style.display = 'none'
        oNextBtn.style.display = 'none'
        play()
    }

    function oPrevBtnClick() {
        currentIndex--
        if (currentIndex < 0) {
            currentIndex = oSwiperItem.length - 1
        }
        changeCurrent(currentIndex)

    }

    function oNextBtnClick() {
        currentIndex++
        if (currentIndex >= oSwiperItem.length) {
            currentIndex = 0
        }
        changeCurrent(currentIndex)
    }

    function oDotsClick(e) {
        var e = e || window.event
        var target = e.target || e.srcElement
        target.className = 'dot_item current'
        var index = [].indexOf.call(oDotItem, target)
        changeCurrent(index)
    }

    init()
})(document)




//构造函数方式

; (function (doc) {
     var Swiper = function(options) {
        this.oWrap = doc.getElementsByClassName('J_swiper_wrapper')[0]
        this.oSwiperItem = doc.getElementsByClassName('swiper_item')
        this.oPrevBtn = doc.getElementsByClassName('J_prev_btn')[0]
        this.oNextBtn = doc.getElementsByClassName('J_next_btn')[0]
        this.oDots = doc.getElementsByClassName('dots_wrapper')[0]
        this.oDotItem = doc.getElementsByClassName('dot_item')
        this.currentIndex = 0
        this.timer = null
        this.delay = options.delay || 3000
        this.autoplay = options.autoplay || false
        this.init()
    }

    Swiper.prototype = {
        init: function () {
            this.bindEvent()
            this.autoplay && this.play()
        },
        bindEvent: function () {
            this.oWrap.addEventListener('mouseover', this.oWrapMouseover.bind(this), false)
            this.oWrap.addEventListener('mouseleave', this.oWrapMouseleave.bind(this), false)
            this.oPrevBtn.addEventListener('click', this.oPrevBtnClick.bind(this), false)
            this.oNextBtn.addEventListener('click', this.oNextBtnClick.bind(this), false)
            this.oDots.addEventListener('click', this.oDotsClick.bind(this), false)
     
        },
        play: function () {
            var _this = this
            this.timer = setInterval(function () {
                if (_this.currentIndex >= _this.oSwiperItem.length - 1) {
                    _this.currentIndex = 0
                } else {
                    _this.currentIndex++
                }
                _this.changeCurrent(_this.currentIndex)
            }, _this.delay)
        },
        changeCurrent: function (index) {
            for (var i = 0; i < this.oDotItem.length; i++) {
                this.oSwiperItem[i].className = 'swiper_item'
                this.oDotItem[i].className = 'dot_item'
            }
            this.oSwiperItem[index].className = 'swiper_item current'
            this.oDotItem[index].className = 'dot_item current'
        },
        oWrapMouseover: function (e) {
            this.oPrevBtn.style.display = 'block'
            this.oNextBtn.style.display = 'block'
            clearInterval(this.timer)
            this.timer = null
        },
        oWrapMouseleave: function () {
            this.oPrevBtn.style.display = 'none'
            this.oNextBtn.style.display = 'none'
            this.play()
        },

        oPrevBtnClick: function () {
            this.currentIndex--
            if (this.currentIndex < 0) {
                this.currentIndex = this.oSwiperItem.length - 1
            }
            this.changeCurrent(this.currentIndex)

        },

        oNextBtnClick: function () {
            this.currentIndex++
            if (this.currentIndex >= this.oSwiperItem.length) {
                this.currentIndex = 0
            }
            this.changeCurrent(this.currentIndex)
        },
        
        oDotsClick: function (e) {
            var e = e || window.event
            var target = e.target || e.srcElement
            var oDotItem = doc.getElementsByClassName('dot_item')
            var index = [].indexOf.call(oDotItem, target)
            this.oDotItemclassName = 'dot_item current'
            this.changeCurrent(index)
        }

    }

    window.Swiper = Swiper
}) (document)

new Swiper({
            delay:3000,
            autoplay:false
        })