自学内容网 自学内容网
自学内容网 > 正文

DOM操作和事件监听综合练习：利用JS实现图片轮播

🕗 发布于 2024-11-11 07:07 javascript  开发语言  ecmascript  

我们经常会看到购物网页上有商品图片在自动循环播放，这就是图片轮播，图片轮播‌是一种常见的网页设计元素，用于在网页上自动切换显示多张图片或内容。它通过JavaScript来实现图片的自动轮播效果，结合HTML和CSS来完成布局和样式设置。如下效果：

20241110_150122

以上就是图片轮播的效果，下面详细讲解代码的运用，实现上面视频的效果。大家也可以自己试试看，或者复制最后完整代码试试吧！

一、HTML部分

在HTML中创建一个包含轮播图的容器，通常使用<div>元素，并为其添加一个唯一的ID。

1、设置一个div容器用于显示图片的区域

<body>  
 
    <div class="carousel-container">  
        <img src="./img_src/p1.jpg" class="carousel-image" id="img1">  
    </div> 
</body>

2、设置图片按钮切换区域

<body>  
    <div  class="clear_ele change-image">
        <p class="button"  id="p1">第1张</p>
        <p class="button"  id="p2">第2张</p>
        <p class="button"  id="p3">第3张</p>
        <p class="button"  id="p4">第4张</p>   
    </div>
</body>

3、设置提示信息区域

为了让用户可以知道点击Enter键可以停止轮播，要设置一个区域显示图片轮播的状态信息。

<body>  

    <div id="output">图片轮播关闭......(按Enter键开启轮播)</div>
 
</body>

 HTML部分基本结构就完成了，代码如下：

<body>  
 
    <div class="carousel-container">  
        <img src="./img_src/p1.jpg" class="carousel-image" id="img1">  
    </div> 
 
    <div  class="clear_ele change-image">
        <p class="button"  id="p1">第1张</p>
        <p class="button"  id="p2">第2张</p>
        <p class="button"  id="p3">第3张</p>
        <p class="button"  id="p4">第4张</p>   
    </div>
 
    <div id="output">图片轮播关闭......(按Enter键开启轮播)</div>
    </script>  
</body>

 二、‌CSS样式‌

通过CSS对容器和列表进行布局和样式设置，例如设置容器的宽度、高度、背景色等，并设置列表项的宽度和高度，以及布局方式。

代码如下：

<style>  
        body, html {  
            margin: 0;  
            padding: 0; 
            width: 100%; 
            height: 100%;  
        }  
        .carousel-container {  
            position: relative;  
            width: 50%;  
            height:55%; /* 根据需要设置高度 */ 
            border: 4px red solid;
            background-color: gray;
        }  
        .carousel-container .carousel-image {  
            position: absolute;  
            top: 0;  
            left: 0;  
            width: 100%;  
            height: 100%;  
            opacity: 1; /* 不透明度0-1 */  
        }  
 
        .change-image{
            width: 15%;  
            height: 3%;  
            /* border: 1px purple solid; */
            position: absolute;
            top: 30%;
            left: 5%;
        }
 
        .change-image .button{        
            width: 60px;  
            height: 30px;
            color: white;
            text-align: center;
            background-color: red;
            border-radius: 10px;
            margin-left: 9px;
            float: left;
        }
 
 
 
        #output {  
            color: white;
            background-color: red; 
            text-align: center;
            width: 20%;  
            height: 3%; 
            margin-top: 1%;      
            position: relative;
            left: 5%;   
            border-radius: 10px;
        } 
 
        .clear_ele::after{
            content: "";  /* 这个伪元素的内容属性必须有 */
            display: block;
            /* border: 6px purple dashed; */
            clear: both;
        }

 效果如下：

三、‌JavaScript代码‌

使用JavaScript来实现轮播图的功能。 

1、实现主动轮播


（1）获取图片元素和初始化变量，获取id为img1的图片元素

const imgElement = document.getElementById("img1");

（2）定义自动切换图片的函数。定义变量scroll_img并初始化为false，用于控制自动轮播的开启和关闭状态，定义一个自动轮播的函数，当showNextImage1函数在scroll_img为true时执行图片切换逻辑

function showNextImage1() {     
            if(scroll_img){
                if(i>4){
                    i = 1;
                }else{               
                    imgElement.src = `./img_src/p${i}.jpg`;
                    i =  i + 1;
                } 
            }
        }

其中，如果 i 大于 4，将 i 重置为 1，实现循环切换。否则，根据当前的 i 值设置图片元素的 src 属性为 ./img_src/p${i}.jpg，然后 i 的值加 1，切换到下一张图片。

（3）设置每1秒切换一次图片 （无限循环）

 setInterval(showNextImage1, 500);

2、实现四个按钮切换图片

（1）获取元素

const p = document.getElementsByTagName("p");

 （2）为四个按钮添加事件监听， click：单击鼠标时触发

p[0].addEventListener("click",
            function(){
                i = 1;
                imgElement.src = `./img_src/p${i}.jpg`;
            }
        )
 
        p[1].addEventListener("click",
            function(){
                i = 2;
                imgElement.src = `./img_src/p${i}.jpg`;
            }
        )
 
        p[2].addEventListener("click",
            function(){
                i = 3;
                imgElement.src = `./img_src/p${i}.jpg`;
            }
        )
 
        p[3].addEventListener("click",
            function(){
                i = 4;
                imgElement.src = `./img_src/p${i}.jpg`;
            }
        )

3、实现回车键控制轮播是否开启

（1）获取显示提示信息的元素

 const outputDiv = document.getElementById('output');

（2）添加键盘按下事件监听

document.addEventListener('keydown',  
        function(event) {              
            const keyCode = event.key; 
            if(keyCode==="Enter"){
                scroll_img = !scroll_img;      
            } 
            if (scroll_img) {
                outputDiv.textContent = "图片轮播开启......(按Enter键关闭轮播)";
                outputDiv.style.backgroundColor = "green";
            } else {
                outputDiv.textContent = "图片轮播关闭......(按Enter键开启轮播)";
                outputDiv.style.backgroundColor = "red";
            }
        }

把以上全部代码结合在一起，就能实现简单的图片轮播，代码如下：（快复制代码试试吧）

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <title>图片自动切换（轮播图效果）</title>  
    <style>  
        body, html {  
            margin: 0;  
            padding: 0; 
            width: 100%; 
            height: 100%;  
        }  
        .carousel-container {  
            position: relative;  
            width: 50%;  
            height:55%; /* 根据需要设置高度 */ 
            border: 4px red solid;
            background-color: gray;
        }  
        .carousel-container .carousel-image {  
            position: absolute;  
            top: 0;  
            left: 0;  
            width: 100%;  
            height: 100%;  
            opacity: 1; /* 不透明度0-1 */  
        }  
 
        .change-image{
            width: 15%;  
            height: 3%;  
            /* border: 1px purple solid; */
            position: absolute;
            top: 30%;
            left: 5%;
        }
 
        .change-image .button{        
            width: 60px;  
            height: 30px;
            color: white;
            text-align: center;
            background-color: red;
            border-radius: 10px;
            margin-left: 9px;
            float: left;
        }
 
 
 
        #output {  
            color: white;
            background-color: red; 
            text-align: center;
            width: 20%;  
            height: 3%; 
            margin-top: 1%;      
            position: relative;
            left: 5%;   
            border-radius: 10px;
        } 
 
        .clear_ele::after{
            content: "";  /* 这个伪元素的内容属性必须有 */
            display: block;
            /* border: 6px purple dashed; */
            clear: both;
        }
    </style>  
</head>  
<body>  
 
    <div class="carousel-container">  
        <img src="./img_src/p1.jpg" class="carousel-image" id="img1">  
    </div> 
 
    <div  class="clear_ele change-image">
        <p class="button"  id="p1">第1张</p>
        <p class="button"  id="p2">第2张</p>
        <p class="button"  id="p3">第3张</p>
        <p class="button"  id="p4">第4张</p>   
    </div>
 
    <div id="output">图片轮播关闭......(按Enter键开启轮播)</div>
 
    <script>  
    
 
        // 【实现自动轮播】
        //1、获取图片元素和初始化变量，获取id为img1的图片元素
        const imgElement = document.getElementById("img1"); 
        //1为当前显示的图片序号
        var i = 1;
        var scroll_img = false;
 
        //2、定义自动切换图片的函数
        function showNextImage1() {     
            if(scroll_img){
                if(i>4){
                    i = 1;
                }else{               
                    imgElement.src = `./img_src/p${i}.jpg`;
                    i =  i + 1;
                } 
            }
        }  
        // 每1秒切换一次图片 （无限循环）
        setInterval(showNextImage1, 500);  
 
 
 
        // 【实现四个按钮切换图片】
        const p = document.getElementsByTagName("p");
        //为四个按钮添加事件监听
        p[0].addEventListener("click",
            function(){
                i = 1;
                imgElement.src = `./img_src/p${i}.jpg`;
            }
        )
 
        p[1].addEventListener("click",
            function(){
                i = 2;
                imgElement.src = `./img_src/p${i}.jpg`;
            }
        )
 
        p[2].addEventListener("click",
            function(){
                i = 3;
                imgElement.src = `./img_src/p${i}.jpg`;
            }
        )
 
        p[3].addEventListener("click",
            function(){
                i = 4;
                imgElement.src = `./img_src/p${i}.jpg`;
            }
        )
 
 
  
 
    // 【实现回车键控制轮播是否开启】    
      //1、获取显示提示信息的元素
    const outputDiv = document.getElementById('output'); 
      //2、添加键盘按下事件监听
    document.addEventListener('keydown',  
        function(event) {              
            const keyCode = event.key; 
            if(keyCode==="Enter"){
                scroll_img = !scroll_img;      
            } 
            if (scroll_img) {
                outputDiv.textContent = "图片轮播开启......(按Enter键关闭轮播)";
                outputDiv.style.backgroundColor = "green";
            } else {
                outputDiv.textContent = "图片轮播关闭......(按Enter键开启轮播)";
                outputDiv.style.backgroundColor = "red";
            }
        }
    );
 
 
    </script>  
</body>  
</html>


原文地址：https://blog.csdn.net/2401_87197766/article/details/143661280

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024