前端——JavaScript实现图片轮播

JavaScript设计实现轮播图效果。实现以下三个主要功能：

1.图片每隔3s可以自动切换

2.设置左右按键，实现手动切换图片

3.设置图片下标，可以根据下标选择要展示的图片

最终效果如视频所示：

轮播图

全部代码：

html+css

html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="轮播图.css">
    <script>
        window.onload=function(){
            // 获取轮播器 container
            var container=document.querySelector(".container")

            // 获取图片的容器
            var img_box =document.querySelector(".container .img_box")
            img_box.style.left="-800px"
            
            //轮播的核心代码
            var change=function(offset){

                var newoffset=parseInt(img_box.style.left)+offset
                var speed=offset/100

                var move=function(){
                    img_box.style.left=parseInt(img_box.style.left)+speed+"px"
                    if(parseInt(img_box.style.left)!==newoffset){
                        setTimeout(move,10)
                    }else{
                        if(parseInt(img_box.style.left)==-3200){
                        img_box.style.left="-800px"
                    }else if(parseInt(img_box.style.left)==-0){
                        img_box.style.left="-2400px"
                    }

                    }

                }
                move()
            }
          

            // 生成左右切换的按钮

            var ul=document.createElement("ul")
            ul.className="buttons"
            var left_li=document.createElement("li")
            left_li.innerText="<"
            var right_li=document.createElement("li")
            right_li.innerText=">"

            ul.appendChild(left_li)
            ul.appendChild(right_li)    
            container.appendChild(ul)      
            
            // 防连点击
            var flag=0
            // 给左右切换的按钮绑定事件
            left_li.onclick=function(){
                if(flag==0){
                change(800)
                index--;
                if(index<0){
                    index=2
                }
                highlight()
                flag=1
                setTimeout(function(){
                    flag=0
                }, 1500);

            }
            }
            right_li.onclick=function(){
            if(flag==0){
                change(-800) 
                index++;
                if(index>2){
                    index=0
                }
                highlight()
                flag=1
                setTimeout(function(){
                    flag=0
                }, 1500);
            }
            }

            // 自动轮播
            var timer=setInterval(right_li.onclick,3000)

            container.onmouseenter=function(){
                clearInterval(timer)
            }
            
            container.onmouseleave=function(){
                timer=setInterval(right_li.onclick,3000)
            }


            // 生成任意切换的按钮
            var dott_ul=document.createElement("ul")
            dott_ul.className="dotts"

            // 获取图片数量
            var img_box_li=document.querySelectorAll(".img_box li")
            for(var i=0;i<img_box_li.length;i++){
                var li=document.createElement("li")
                li.innerHTML=i+1
                if(i==0){
                    li.className="current"
                }
                dott_ul.append(li)
            }
            container.append(dott_ul)


            // 任意切换
            var dott_ul_li=document.querySelectorAll(".dotts li")
            for(var j=0;j<dott_ul_li.length;j++){
                dott_ul_li[j].onclick=function(){

                    // 图片切换
                    var new_index=this.innerText-1
                    change((index-new_index)*800)

                    index=new_index
                
                   highlight()
                    // 效果切换

                }
            }

            // 定义一个游标 记录当前点的索引值
            var index=0

            // 按钮样式切换代码
            var highlight=function(){

                for(var k=0;k<dott_ul_li.length;k++){
                    if(k==index){
                        dott_ul_li[k].className="current"
                    }else{
                        dott_ul_li[k].className= ""
                    }

            }

        }

        // 初始化辅助无缝轮播图片
        var last_li=img_box.firstElementChild.cloneNode(true)
        var first_li=img_box.lastElementChild.cloneNode(true)

        img_box.insertBefore(first_li,img_box.firstElementChild)
        img_box.appendChild(last_li)
    }
    </script>
</head>
<body>
    <!-- <input type="button" value="left" class="left">
    <input type="button" value="right" class="right"> -->
    <div class="container">
        <ul class="img_box">
            <li><img src="../素材/hbu1.jpg" alt=""></li>
            <li><img src="../素材/hbu2.jpg" alt=""></li>
            <li><img src="../素材/好不.jpg" alt=""></li>

        </ul>
     </div>

     

    
</body>
</html>

css

css 复制代码

*{
    padding: 0;
    margin: 0 ;
}
img{
    width: 100px;
}
.container{
    width: 800px;
    height: 350px;
    background: chartreuse;
    margin:100px auto ;
    overflow: hidden;
    position: relative;
}
.container .img_box{
    width: 4000px;
    height: 350px;
    background: pink;
    display: flex;
    position: absolute;
    left: -800px;
     
}

.container li{
    width: 800px;
    height: 350px;
    background: blanchedalmond;
    list-style: none;

}

.container li img{
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    /* 裁剪图片 */
}


/* input{
    margin: 0px;
    width: 50px;
    height: 30px;
} */

.container .buttons{
    position: absolute;
    width: 90%;
    left: 5%;
    top: 150px;
    /* background: crimson; */
    display: flex;
    justify-content: space-between;
}

.buttons li{
    list-style: none;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.581);
    text-align: center;
    line-height: 50px;
    border-radius: 25px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-weight: 600;
}

.dotts{
    position: absolute;
    /* background: yellow; */
    width: 100%;
    /* height: 20px; */
    bottom: 10px;
    display: flex;
    justify-content: center;

}
.dotts li{
    width: 5px;
    height: 15px;
    border-radius: 4px;
    list-style: none;
    background: rgba(255, 255, 255, 0.767);
    margin: 4px;
    padding: 1px 5px;
    font-size: 3px;
}

.dotts li.current{
    background: rgba(0, 0, 0, 0.603);
    color: rgb(255, 255, 255);
    border: 1px white solid;

}