js实现轮播(手动+自动)

js实现轮播(手动+自动)

---

// html部分
<div id="banner">
    <ul id="imagesL">
        <li><a href="#"><img src="images/image01.JPG" alt=""></a></li>
        <li><a href="#"><img src="images/image02.JPG" alt=""></a></li>
        <li><a href="#"><img src="images/image03.JPG" alt=""></a></li>
        <li><a href="#"><img src="images/image04.JPG" alt=""></a></li>
        <li><a href="#"><img src="images/image05.JPG" alt=""></a></li>
        <li><a href="#"><img src="images/image01.JPG" alt=""></a></li>
    </ul>
    <div id="nav">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </div>
    <span id="prev">&lt;</span>
    <span id="next">&gt;</span>
</div>

// css部分
*{
    margin: 0;
    padding: 0;
}

html{
    font-size: 10px;
}

#banner{
    width: 40rem;
    height: 50rem;
    position: relative;
    margin: 0 auto;
    margin-top: 10rem;
    overflow: hidden;
}

#imagesL{
    list-style: none;
	position: absolute;
	left: 0;
    width: 240rem;
}

#imagesL li{
    float: left;
    width: 40rem;
    height: 50rem;
}

#imagesL li img{
    width: 100%;
    height: 100%;
}

#nav{
    position: absolute;
    left: 15rem;
    bottom: 2rem;
}

#nav a{
    float: left;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 1rem;
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,0.5);
    box-sizing: border-box;
    border: 1px solid #fff;
}

.a_color{
    background-color: skyblue;
}

#prev{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 5rem;
    text-align: center;
    line-height: 5rem;
    color: rgba(255,255,255,0.7);
    font-size: x-large;
    font-weight: bold;
    background-color: rgba(0,0,0,0.4);
    display: none;
    cursor: pointer;
}

#next{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 5rem;
    text-align: center;
    line-height: 5rem;
    color: rgba(255,255,255,0.7);
    font-size: x-large;
    font-weight: bold;
    background-color: rgba(0,0,0,0.4);
    display: none;
    cursor: pointer;
}

// js部分
let banner = document.getElementById('banner')
let ul = document.getElementById('imagesL')
let ul_width = ul.offsetWidth
let li_count = ul.children.length
let li_width = ul.children[0].offsetWidth
let dot_a = document.getElementById('nav').children
	dot_a[0].classList.add('a_color')
let prev = document.getElementById('prev')
let next = document.getElementById('next')
let index = 0
let timer = null
let bool = true // 解决左右连击轮播问题

window.onfocus = function(){
    function animate(element, target){
        let step = 10
        step = (Math.abs(element.offsetLeft) < Math.abs(target))? -step : step
        let ani_timer = setInterval(function(){
            element.style.left = element.offsetLeft + step + 'px'
            bool = false
            if(Math.abs(target - element.offsetLeft) <=  Math.abs(step)){
                element.style.left = target + 'px'
                bool = true
                clearInterval(ani_timer)
            }
        }, 15)
        go()
    }

    // animate(ul, -400)
    next.onclick = function(){
        clearInterval(timer)
        if(bool){
            index += 1;
            if(index === li_count){
                index = 1
                ul.style.left = 0 + 'px'
            }
            animate(ul, -li_width * index)
            getStyle(dot_a, index, li_count)
        }
    }
    next.onmouseover = function(){
        clearInterval(timer)
    }

    prev.onclick = function(){
        clearInterval(timer)
        console.log(index);
        if(bool){
            index -= 1
            if(index === -1){
                index = 4
                ul.style.left = -2000 + 'px'
                // animate(ul, li_width * index) // -2000
            }
            console.log(index);
            animate(ul, -li_width * index)
            getStyle(dot_a, index, li_count)
        }
    }
    prev.onmouseout = function(){
        clearInterval(timer)
    }

    function go(){
        clearInterval(timer)
        timer = setInterval(function(){
            clearInterval(timer)
            index += 1;
            if(index === li_count){
                index = 1
                ul.style.left = 0 + 'px'
            }
            console.log(-li_width * index);
            animate(ul, -li_width * index)

            // 抽离
            // for(let i = 0; i < dot_a.length; i++){
            //     dot_a[i].classList.remove('a_color')
            // }
            // if(index === li_count - 1){
            //     dot_a[0].classList.add('a_color')
            // }else{
            //     dot_a[index].classList.add('a_color')
            // }
            getStyle(dot_a, index, li_count)
            console.log(index);
        }, 2000)
    }
    go()

    function getStyle(eleArr, index, li_Count){
        for(let i = 0; i < eleArr.length; i++){
            eleArr[i].classList.remove('a_color')
        }
        if(index === li_Count - 1){
            eleArr[0].classList.add('a_color')
        }else{
            eleArr[index].classList.add('a_color')
        }
    }

    for(let i = 0; i < dot_a.length; i++){
        dot_a[i].onclick = function(){
            clearInterval(timer)
            index = i;
            ul.style.left = -li_width * index + 'px'
            console.log(-li_width * index);
            getStyle(dot_a, index, li_count)
        }
    }

    banner.onmouseover = function(){
        clearInterval(timer)
        prev.style.display = 'block'
        next.style.display = 'block'
    }
    banner.onmouseout = function(){
        clearInterval(timer)
        go()
        prev.style.display = 'none'
        next.style.display = 'none'
    }
}

window.onblur = function () {
	clearInterval(timer)
}