轮播图2（上下轮播）

2023-12-13 11:53:03
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        body {
           /* overflow: hidden;*/
        }

        #container {
            width: 100%;
            min-height: 100px;
        }

        .warp {
            width: 350px;
            height: 200px;
            border: 1px solid #333333;
            margin: 70px auto;
            overflow: hidden;
            position: relative;
        }

        ul {
            list-style: none;
        }

        .trans {
            transition: margin-top 1s ease;
        }

        ul li {
            width: 400px;
            height: 200px;
            float: left;
        }

        ul li img {
            width: 100%;
            height: 100%;
        }

        ol {
            position: absolute;
            list-style: none;
            top: 180px;
            left: 160px;
        }

        ol li {
            margin-right: 5px;
            float: left;
            width: 18px;
            height: 5px;
            border: 1px solid #ccc;
            background-color: white;
            border-radius: 10px;
            cursor: pointer;
        }
        .left{
            position: absolute;
            display: none;
            width: 30px;
            height: 40px;
            top: 80px;
            transform: rotate(90deg);
            cursor: pointer;
            opacity: 0.5;
        }
        .left img {
            width: 100%;
            height: 100%;
        }
        .left:hover{
            opacity: 1;
        }
        .right{
            position: absolute;
            display: none;
            width: 30px;
            height: 40px;
            top: 80px;
            right: 0;
            transform: rotate(270deg);
            cursor: pointer;
            opacity: 0.5;
        }
        .right img {
            width: 100%;
            height: 100%;
        }
        .right:hover{
            opacity: 1;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="warp">
        <span class="left"><img src="login/images/prev.png"></span>
        <span class="right"><img src="login/images/next.png"></span>
        <ul>
            <li><img src="login/images/01.jpg"></li>
            <li><img src="login/images/02.jpg"></li>
            <li><img src="login/images/03.jpg"></li>
            <li><img src="login/images/04.jpg"></li>
            <li><img src="login/images/05.jpg"></li>
        </ul>
        <ol>
            <li index="1"></li>
            <li index="2"></li>
            <li index="3"></li>
            <li index="4"></li>
        </ol>
    </div>
</div>
<script>
    (function() {
        let warp = document.querySelector('.warp');
        let oUl = document.querySelector('ul');
        let oLi = document.querySelectorAll('ol li');
        let allLi = document.querySelectorAll('ul li').length-1;
        let left = document.querySelector('.left');
        let right = document.querySelector('.right');
        let currentIndex = 1;
        let T = null;
        console.log(oLi);
        oLi[0].style.backgroundColor = '#333333';
        T = setInterval(begin, 2000);
        //鼠标移入移出
        warp.addEventListener('mouseenter', () => {
            left.style.display = 'inline-block';
        right.style.display = 'inline-block';
        clearInterval(T);
        T = null;
    });
    warp.addEventListener('mouseleave', () => {
        left.style.display = 'none';
    right.style.display = 'none';
    T = setInterval(begin, 2000);
    });
    //li 点击跳转事件
    oLi.forEach((li,index)=>{
        li.onclick = function(){
        oUl.style.marginTop = -200 * index + 'px';//index是点击ol的角标
        oUl.className = 'trans';
        currentIndex=index;
        for(let i = 0; i<li.parentNode.children.length; i++){
            oLi[i].style.backgroundColor = '#ffffff';
        }
        li.style.backgroundColor = '#333333';
    }
    })

    //左右箭头点击跳转
    let curr = 0;
    left.onclick = function(){
        console.log(currentIndex);
        if(currentIndex<1){
            currentIndex = 4
        }
        curr=currentIndex;
        curr--;
        console.log(curr);
        oUl.style.marginTop = -200 * curr + 'px';
        currentIndex=curr;
        for(let i = 0; i<oLi[0].parentNode.children.length; i++){
            oLi[i].style.backgroundColor = '#ffffff';
        }
        oLi[curr].style.backgroundColor = '#333333';
    }
    right.onclick = function(){
        if(currentIndex>=3){
            currentIndex = -1
        }
        curr=currentIndex;
        curr++;
        oUl.style.marginTop = -200 * curr + 'px';
        currentIndex=curr;
        for(let i = 0; i<oLi[0].parentNode.children.length; i++){
            oLi[i].style.backgroundColor = '#ffffff';
        }
        oLi[curr].style.backgroundColor = '#333333';
        console.log(currentIndex);
    }

    //轮播方法
    function begin() {
        if (currentIndex > allLi) {
            oUl.className = '';
            oLi[0].style.backgroundColor = '#333333';
            oLi[currentIndex - 2].style.backgroundColor = '#ffffff';
            oUl.style.marginTop = 0 + 'px';
            currentIndex = 1;
        } else if (currentIndex < allLi) {
            if(currentIndex===0){
                currentIndex=1;
            }
            oUl.className = 'trans';
            oUl.style.marginTop = -200 * currentIndex + 'px';
            oLi[currentIndex].style.backgroundColor = '#333333';
            oLi[currentIndex - 1].style.backgroundColor = '#ffffff';
            currentIndex++;
        } else if (currentIndex === allLi) {
            oUl.style.marginTop = -200 * currentIndex + 'px';
            oLi[0].style.backgroundColor = '#333333';
            oLi[allLi-1].style.backgroundColor = '#ffffff';
            currentIndex++;
        }
    }
    })()
</script>
</body>
</html>
码农公寓

相关文章
