Js轮播图

Gurean

已于 2023-04-26 11:56:45 修改

阅读量551

点赞数

文章标签：前端 javascript html

于 2022-10-21 00:13:05 首次发布

本文链接：https://blog.csdn.net/weixin_51450341/article/details/127424012

版权

功能1:能够自动切换下一张图片,时间间隔为2秒钟

功能2:单击按钮能切换到相应的图片

功能3.鼠标悬浮到图片上时,停止轮转

功能4.鼠标离开,图片轮转继续

功能5.设置上一张按钮,单击立刻切换到上一张,此按钮默认不显示,鼠标悬浮到图片上显示

5.1显示上一张图片

5.2显示下一张图片

完整代码

网页中的轮播图太常见了,几乎是每个首页必备,本篇博客记录的轮播图主要实现了如下功能:

1.能够自动切换下一张图片,时间间隔为2秒钟

2.能够单击按钮切换到相应的图片

3.鼠标悬浮到图片上时,停止轮转

4.鼠标离开,图片轮转继续

5.1.设置上一张按钮,单击立刻切换到上一张图片,此按钮默认不显示,鼠标悬浮到图片上显示

5.2.设置下一张按钮

效果如下:

 <div class="div1">
        <div id="show">
            <div id="show_imgs">
                <img src="./img2/1.jpg">
                <img src="./img2/2.jpg">
                <img src="./img2/3.jpg">
                <img src="./img2/4.jpg">
                <img src="./img2/5.jpg">
         </div>
         <div class="show_num">
                <ul id="show_list">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                 </ul> 
         </div>
         <span class="arrows" id="lastone" onclick="lastone()">&lt;</span>
         <span class="arrows" id="nextone" onclick="nextone()">&gt;</span>
  </div>

素材展示:

功能1:能够自动切换下一张图片,时间间隔为2秒钟

在效果图中可以看到,图片每次只展示一张,其他全部隐藏了,在两秒后,展示下一张图片,其他隐藏,而这些仅仅依靠静态样式是无法达到的,而需要将隐藏显示的样式动态的写在js中.

下述代码段执行后,显示第一张图片,且图片对应的编号背景颜色改变

 let i=0;//轮播图
    function show_imgs(){
        let imgs=document.getElementById("show_imgs").children;
        let list=document.getElementById("show_list").children;
      
        for(let m=0;m<imgs.length;m++){
            imgs[m].style="display:none";
            list[m].style="background-color:(255, 255, 255)";
         
        }
        imgs[i].style="display:block";
        list[i].style="background-color:#399C47";
        i++;
        if(i===imgs.length){
            i=0;
        }
    }

    show_imgs();

使用全局变量i控制显示第几张图片,在显示图片前,需要获取到图片和其编号,并分别存储在数组里,此时默认将所有图片都隐藏.第一次进入网页时,i为0,显示第一张图片及其编号,然后让i++,为显示下一张图片做准备.

其实在进入网页时,就需要展示一张默认的图片,所以函数show_imgs()在刚进入时就调用,而非用户点击或做其他动作时调用.

此时网页已经可以初步控制显示了,动态的切换需要依靠定时器实现,在定时器中调用show_imgs()函数,并给其间隔的时间,就能实现图片的轮转

    let interval=setInterval(show_imgs,2000);

功能2:单击按钮能切换到相应的图片

展示图片的函数已经搭建完成,在此功能中,只需要将用户点击的数字和show_imgs()函数中控制图片的i联系起来,就能实现切换

首先获取用户可能点击的数字,将其存放在数组中,此时需要注意:

设置数字按钮时,使用了li标签来存放数字,因此在使用document对象获取时,获取到的并不是li标签中的数字,而是li标签,因此需要一个新的变量,将其与数组中的li标签对应起来.也就是list[j].index=j

这才开始考虑用户点击后的跳转问题,对于控制图片跳转的变量i已经定义好了,所以,将用户点击的li标签的下标传递给i,再调用show_imgs()函数就可以实现跳转.

此处的i=this.index中this指向list[j],是由于调用函数的时候会决定函数中的this指向，谁调用了函数，函数的this就指向谁

    let list=document.getElementById("show_list").children;
    let j=0;
    while(j<list.length){
        list[j].index=j;
        list[j].onclick=function(){
            i=this.index;
            show_imgs();
        }
        j++;
    }

功能3.鼠标悬浮到图片上时,停止轮转

在网页中,轮播图大多用作推销展示产品,那么如果用户对产品感兴趣,可能会将鼠标悬浮到图片上,此时图片若继续轮转,可能会错失潜在用户,因此,需要设置当鼠标悬浮到图片上时,停止轮转

    function stop(){//鼠标悬停到图片上停止
        clearInterval(interval);
    }

功能4.鼠标离开,图片轮转继续

    function start(){//鼠标离开图片继续
        interval=setInterval(show_imgs,2000);
    }

在继续轮转这里有一个问题,为什么可以直接设置定时器,调用show_imgs()函数,图片不会发生错乱吗? 答案是并不会,这是因为,在定义show_imgs()函数时,将控制显示第几张图片的变量i定义为全局变量,因此在清除定时器时,i的值并没有发生改变,图片也就不会错乱了

功能5.设置上一张按钮,单击立刻切换到上一张,此按钮默认不显示,鼠标悬浮到图片上显示

此功能中的按钮显示问题与功能3,4共同存在,追加新的内容就好了

    function stop(){//鼠标悬停到图片上停止
        clearInterval(interval);
        document.getElementById("lastone").style="display:inline-block";
        document.getElementById("nextone").style="display:inline-block";
    }
    function start(){//鼠标离开图片继续
        document.getElementById("lastone").style="display:none";
        document.getElementById("nextone").style="display:none";
        interval=setInterval(show_imgs,2000);
    }

5.1显示上一张图片

在控制图片回退的问题中,考虑到在写show_imgs()函数时,i++被放置在函数的末尾,当函数执行之后,i值表示为下一张图片的下标,若想找到当前图片的上一张图片,则图片下标i需要减2

此功能分为三种情况:

1:当前图片为第一张此时i=1,上一张图片为最后一张,此时i需要=数组长度-1,但考虑到减2的情况,i最终等于数组长度＋1

2.当前图片为最后一张,此时i=0,上一张图片为倒数第二张,此时i需要=数组长度-2,同样,考虑到减2的情况,i最终等于数组长度

3.图片位于数组中,想找到当前图片的上一张图片,下标i需要减2

    function lastone(){
        if(i===1){
            i=list.length+1;
        }
        if(i===0){
            i=list.length;
        }
        i-=2;
        show_imgs();
    }

5.2显示下一张图片

写show_imgs()函数时,i++放置在函数的末尾,当函数执行之后,i值表示为下一张图片的下标,因此直接调用show_imgs()函数即可

    function nextone(){
        show_imgs();
    }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
/* 轮播图容器 */
.div1{
    width: 50%;
    /* height: 450px; */
    margin: 0 auto;
    background-color:#EDF4ED;
    position: relative;
}
/* 上一张，下一张按钮的样式 */
    span.arrows{
        /* display: none; */
        height: 40px;
        line-height: 40px;
        width: 40px;
        background-color: rgba(36, 36, 173, 0.2);
        font-size: 30px;
        border-radius: 50%;
        color: rgb(87, 84, 84);
        text-align: center;
    }
/* 向左向右箭头 伪类*/
    .arrows:hover{
        cursor: default;
        background-color: lightblue;
    }
/* 向左向右箭头位置 */
    span#lastone{
        position: absolute;
        left: 0px;
        bottom: 35%;
    }
    span#nextone{
        position: absolute;
        right: 0px;
        bottom: 35%;
    }
/* 图片大小 */
    #show_imgs img{
            width: 100%;
    }
/* 表示第几张图片的数字 */
    ul#show_list li{
        /* background-color: #309CCF; */
        list-style-type: none;
        display: inline-block;
        height: 20px;
        width: 20px;
        font-size: 16px;
        background-color: rgb(241, 239, 239);
        border-radius: 50%;
        text-align: center;
        margin-left:15px;
    }
/* 轮播图数字样式伪类  */
    ul#show_list li:hover{
        cursor: default;
    }
/* 轮播图数字容器的边距 */
    div.show_num{
        position: absolute;
        top: 10px;
        right :10px;
        margin-left: 0px;
    }
</style>
<body> 
    <div class="div1">
        <div id="show" onmouseout="start()" onmouseover="stop()">
            <div id="show_imgs" >
                <img src="./img2/1.jpg">
                <img src="./img2/2.jpg">
                <img src="./img2/3.jpg">
                <img src="./img2/4.jpg">
                <img src="./img2/5.jpg">
            </div>
            <div class="show_num">
                <ul id="show_list">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul> 
            </div>
            <span class="arrows" id="lastone" onclick="lastone()">&lt;</span>
            <span class="arrows" id="nextone" onclick="nextone()">&gt;</span>
        </div>
    </div>
</body>
</html>

<script>
   
   let i=0;//控制图片显示
    function show_imgs(){
        let imgs=document.getElementById("show_imgs").children;
        let list=document.getElementById("show_list").children;
      
        for(let m=0;m<imgs.length;m++){
            imgs[m].style="display:none";
            list[m].style="background-color:(255, 255, 255)";
         
        }
        imgs[i].style="display:block";
        list[i].style="background-color:#399C47";
        i++;
        if(i===imgs.length){
            i=0;
        }
    }

    show_imgs();
    let interval=setInterval(show_imgs,2000);//图片自动轮转


    function stop(){//鼠标悬停到图片上停止
        clearInterval(interval);
        document.getElementById("lastone").style="display:inline-block";
        document.getElementById("nextone").style="display:inline-block";
    }
    function start(){//鼠标离开图片继续
        document.getElementById("lastone").style="display:none";
        document.getElementById("nextone").style="display:none";
        interval=setInterval(show_imgs,2000);
    }

    let list=document.getElementById("show_list").children;//点击数字按钮，切换到对应图片
    let j=0;
    while(j<list.length){
        list[j].index=j;
        list[j].onclick=function(){
            i=this.index;
            show_imgs();
        }
        j++;
    }

    function lastone(){//切换到上一张图片
        if(i===1){
            i=list.length;
        }
        if(i===0){
            i=list.length-1;
        }
        i-=1;
        show_imgs();
    }

    function nextone(){//切换到下一张图片
        show_imgs();
    }


</script>

Gurean

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Js轮播图

网页中的轮播图太常见了,几乎是每个首页必备,本篇博客记录的轮播图主要实现了如下功能:1.能够自动切换下一张图片,时间间隔为2秒钟2.能够单击按钮切换到相应的图片3.鼠标悬浮到图片上时,停止轮转4.鼠标离开,图片轮转继续5.1.设置上一张按钮,单击立刻切换到上一张图片,此按钮默认不显示,鼠标悬浮到图片上显示5.2.设置下一张按钮。
复制链接

扫一扫