前端-js：轮播图

Lojarro

于 2024-09-22 22:49:42 发布

阅读量412

点赞数 10

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_75163045/article/details/142444551

版权

学校官网都会有图片轮播，包括自动轮播及手动切换。

1. 原理：

在有限的区域内展示图片。

整个图片部分是一个胶卷，当哪个图片在窗口位置展示哪个图片。

自动轮播：每隔一段时间调相对位置。

2. 实现

$1. 放5张图片

<div class="container">
        <ul class="img_box">
            <!-- tu3 -->
            <li>
                <img src="img/轮播1.png" alt="">
            </li>
            
            <li>
                <img src="img/轮播2.png" alt="">
            </li>
            <li>
                <img src="img/轮播3.png" alt="">
            </li>
            <li>
                <img src="img/轮播4.png" alt="">
            </li>
            <li>
                <img src="img/轮播5.png" alt="">
            </li>
            <!-- tu1 -->
        </ul>
        <!-- <ul class=""></ul> -->
    </div>

$2. css加样式

1>先把图片调小

 * {
            padding: 0;
            margin: 0;
            /* background-color:rgb(43, 43, 43) ; */
        }
        
        img {
            width: 100px;
        }

2> 调内容部分大小

超出的部分隐藏掉（只显示窗口展示的）

.container {
            width: 800px;
            height: 350px;
            background: red;
            margin: 100px auto ;
            overflow: hidden;
            position: relative;
            /* background-color: rgb(43,43,43); */
        }

3> 调胶卷

调整图片相对窗口的位置（position:absolute）负数图片往左走

 .container .img_box {
            width: 5600px;
            height: 350px;
            background: pink;
            display: flex;
            position: absolute;
            left: -800px;
            /* transition: left 1s linear; */
        }

4> 每个图片的样式

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

图片全部展示

.container .img_box li img {
            width: 100%;
            height: 100%;
            /* object-fit: cover; */
        }

5> 开启定时器调整图片的位置

位置判断

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

                // if (newoffset < -3200) {
                //     img_box.style.left = "0px"
                // } else if(newoffset>0){
                //     img_box.style.left = "-3200px"

                // }else {
                //     img_box.style.left = newoffset + "px"
                // }

                // 获取图片切换的目标位置
                var newoffset = parseInt(img_box.style.left) +offset
                var speed=offset/50
                // 慢慢切换
                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)==-4800){
                            img_box.style.left="-800px"
                        }else if(parseInt(img_box.style.left)==0){
                            img_box.style.left="-4800px"
                        }
                    }
                }
                move()

            }

6> 加左右切换的按钮

var ul=document.createElement("ul")
            ul.className="btns"
            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)
            console.log(ul)

7> 仿连点击

var flag=0
            left_li.onclick=function(){
                if(flag==0){
                    change(800)
                    index--;
                    if(index<0){
                        index=4
                    }
                    highlight()

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

                    flag=1
                    setTimeout(function(){
                        flag=0
                    },1000)
                }
            }

8> 自动轮播

 var timer=setInterval(right_li.onclick, 4000)

9> 解决手动轮播冲突问题

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

10> 生成任意切换的按钮

var dot_ul=document.createElement("ul")
            dot_ul.className="dots"

            var img_box_li=document.querySelectorAll(".img_box li")
            console.log(img_box_li)
            for(var i=0;i<img_box_li.length;i++){
                var li=document.createElement("li")
                console.log(li)
                li.innerText=i+1
                if(i==0){
                    li.className="current"

                }
                dot_ul.append(li)
            }
            container.append(dot_ul)
            console.log(dot_ul)

11> 任意切换

var dot_ul_li= document.querySelectorAll(".dots li")
        //    console.log(dot_ul_li)
           for(var j=0;j<dot_ul_li.length;j++){
            dot_ul_li[j].onclick=function(){
                // alert(1)
                // 图片切换
                var new_index=this.innerText-1
                // alert(index)
                change((index-new_index)*800)
                index=new_index
                highlight()

12> 按钮切换

//    定义一个游标，记录当前点点的索引值
           var index=0
           // 按钮样式切换代码
           var highlight=function(){
             // 样式切换

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

13> 初始化辅助无缝轮播图片

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)