当前位置：首页 > article >正文

JS轮播图实现自动轮播、悬浮停止轮播、点击切换，下方指示器与图片联动效果

article 2025/1/20 9:52:38

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .context{
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        .context img{
            width: 600px;
            height: 300px;
        }
        .container{
            position: relative;
        }
        .yuan{
            width: 50px;
            height: 50px;
            position: absolute;
            right: 0;
            top: 43%;
            line-height: 46px;
            font-size: 28px;
            font-weight: bold;
            background-color: white;
            border: 1px solid black;
            border-radius: 50px;
            color: black;
            opacity: 0.5;
            display: none;
            cursor: pointer;
        }
        .leftyuan{
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            top: 43%;
            line-height: 46px;
            font-size: 28px;
            font-weight: bold;
            background-color: white;
            border: 1px solid black;
            border-radius: 50px;
            color: black;
            opacity: 0.5;
            display: none;
            cursor: pointer;
        }
        ul li{
            list-style: none;
            float: left;
            margin: 0 10px;
            width: 35px;
            height: 30px;
            line-height: 30px;
            background-color: #eeeeee;
            cursor: pointer;
        }
        ul{
            position: absolute;
            bottom: 0;
            left: 21%;
        }
        li:hover{
            background-color: #fea500
        }
        .orange{
            background-color: #fea500;
        }
    </style>
</head>
<body>
    <div class="context">  
        <div class="container">
            <img src="./image/1.jpg" alt="">
            <div class="yuan">></div>
            <div class="leftyuan"><</div>
            <ul>
                <li class="orange">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        
        <!-- <button>上一张</button>
        <button>下一张</button> -->
       
    </div>
    
    <script>
        let btns = document.querySelectorAll('button')
        let simg = document.querySelector('img')
        let container = document.querySelector('.container')
        let yuan = document.querySelector('.yuan')
        let leftyuan = document.querySelector('.leftyuan')
        let li = document.querySelectorAll('ul li')
        let b=0
        li.forEach(item=>{
            item.onclick=function(){
                simg.src=`./image/${item.innerText}.jpg`
                jx(item.innerText)
            }
        })
        // 控制图片变化变量
        let d1=setInterval(djq,1000)
        function djq(){

            // clearInterval(d1)
            if(b==5){
                b=0
            }
            simg.src=`./image/${++b}.jpg`
            li.forEach(item=>{
                item.classList.remove('orange')
                if(b==item.innerHTML){
                    item.classList.add('orange')

                }
        })
            if(b==5){
                b=0
            }
        }
        function jx(c){
                b=c
             clearInterval(d1)
             
            simg.src=`./image/${b}.jpg`
            li.forEach(item=>{
                item.classList.remove('orange')
                if(b==item.innerHTML){
                    item.classList.add('orange')

                }
        })
            if(b==5){
                b=0
            }
        }
        yuan.onclick=function(){
           
            if(b>=5){
                b=0
            }
            simg.src=`./image/${++b}.jpg`
            li.forEach(item=>{
                item.classList.remove('orange')
                if(b==item.innerHTML){
                    item.classList.add('orange')
                }
            })
            
        }
        leftyuan.onclick=function(){
           
            if(b<=1){
                b=6
            }
            simg.src=`./image/${--b}.jpg`
            li.forEach(item=>{
                item.classList.remove('orange')
                if(b==item.innerHTML){
                    item.classList.add('orange')
                }
            })
        }
        container.onmouseenter= function(){
            
            clearInterval(d1)
            yuan.style.display='block'
            leftyuan.style.display='block'
            
        }
        container.onmouseleave= function(){
            // console.log('b');
            
            d1 =setInterval(djq,1000)
            yuan.style.display='none'
            leftyuan.style.display='none'
            
        }
        // btns[0].onclick=function(){
        //     if(b<=1){
        //         b=6
        //     }
        //     simg.src=`./image/${--b}.jpg`
            
        // }
        // btns[1].onclick=function(){
        //     if(b>=5){
        //         b=0
        //     }
        //     simg.src=`./image/${++b}.jpg`
            
        // }
        
    </script>
</body>
</html>

效果图：