【Javascript】入门之实现图片切换与轮播

最新推荐文章于 2023-02-27 22:51:45 发布

夹心776655

最新推荐文章于 2023-02-27 22:51:45 发布

阅读量879

点赞数

分类专栏：代码实例 js交互设计文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_37086980/article/details/110164117

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

1.图片切换之点击切换

2.图片切换之点击切换与圆点切换

3.图片切换之定时器切换

1.图片切换之点击切换

描述: 点击右箭头向后切换图片,切换到第四张返回第一张 1--2--3--4-(判断)-1

点击左箭头向前切换图片, 切换到第一张返回第四张 4--3--2--1-(判断)-4

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.切换图片</title>
    <style>
        body,ul,li,p{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .box{
            width: 700px;
            height: 430px;
            margin: 20px auto;
            position: relative;
        }
        .box > img{
            width: 700px;
            height: 430px;
        }
        .leftbtn,.rightbtn{
            width: 36px;
            height: 48px;
            z-index: 2;
        }
        .leftbtn{
            background: url("./img/leftarrow.jpg") no-repeat;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -24px;
        }
        .rightbtn{
            background: url("./img/rightarrow.jpg") no-repeat;
            position: absolute;
            right: -5px;
            top: 50%;
            margin-top: -24px;
        }
        #sequence,#desc{
            width: 100%;
            height: 30px;
            background-color: #000000;
            color:#ffefbd;
            font: bold 14px/30px "微软雅黑";
            text-align: center;
        }
        #sequence{
            position: absolute;
            left: 0;
            top: 0;
        }
        #desc{
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <!-- 1.布局 -->
    <div class="box" id = "box">
      
       <img src="./img/11.jpg" alt="" id="img"> 

       <!-- shift from left to right -->
       <div class="leftbtn" id="leftbtn"></div>
       <div class="rightbtn" id="rightbtn"></div>

       <!-- sequence -->
       <p id="sequence">1/4</p>

       <!-- description -->
       <p id="desc">动漫1</p>

       <script>
           /* 描述： 1--2---3---4-(判断)-1   4--3--2--1--(判断)-4*/
          //2.1 点击右箭头, 图片往后移一个1--2--3--4--(判断)--1
          //2.1.1 获取左右箭头, 图片img,序号, 描述
          var rightbtn = document.getElementById("rightbtn");
          var leftbtn = document.getElementById("leftbtn");
          var img = document.getElementById("img");
          var sequence = document.getElementById("sequence");
          var desc = document.getElementById("desc");
          console.log(leftbtn,rightbtn,img,sequence,desc);
          
          //2.1.2 用数组存储四张图片   
          var arr = ["./img/11.jpg","./img/22.jpg","./img/33.jpg","./img/44.jpg"]
          console.log(arr);
          
          //2.1.3 不知道当前什么状态, 假设为第一张图片
          var i = 0;
          //2.1.4 给右箭头添加点击事件
          rightbtn.onclick = function(){
                 // 切换到下一张 
                i++;  
                // 判断
                if(i > 3) i = 0;
                console.log(i);
                // 修改图片地址
                img.src = arr[i];
                // 修改序号
                sequence.innerHTML = (i+1) + "/4";
                // 修改描述
                desc.innerHTML = "动漫"+ (i+1);
               
          }  
          // 2.1.5  给左箭头添加点击事件
          leftbtn.onclick = function(){
                // 切换到前一张
                i--;  
                // 判断
                if(i < 0) i = 3;     
                console.log(i);
                // 修改图片地址
                img.src = arr[i];
                // 修改序号
                sequence.innerHTML = (i+1) + "/4";
                // 修改描述
                desc.innerHTML = "动漫"+ (i+1);  
          }
       </script>
    </div>
</body>
</html>

2.图片切换之点击切换与圆点切换

描述: 点击右箭头，图片切换1 - 2 - 3 - 4 - 1

点击左箭头，图片切换 4 - 3 - 2 - 1 - 4

点击圆点，图片切换到对应图片

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.切换图片</title>
    <style>
        body,ul,li,p{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .box{
            width: 700px;
            height: 525px;
            margin: 20px auto;
            position: relative;
        }
        .box > img{
            width: 700px;
            height: 525px;
        }
        .leftbtn,.rightbtn{
            width: 36px;
            height: 48px;
            z-index: 2;
        }
        .leftbtn{
            background: url("./images/leftarrow.jpg") no-repeat;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -24px;
        }
        .rightbtn{
            background: url("./images/rightarrow.jpg") no-repeat;
            position: absolute;
            right: -5px;
            top: 50%;
            margin-top: -24px;
        }
        #sequence, #desc{
            width: 100%;
            height: 30px;
            background-color:rgba(0, 0, 0, 0.3);
            color:#ffefbd;
            font: bold 20px/30px "微软雅黑";
            text-align: center;
        }
        #sequence{
            position: absolute;
            left: 0;
            top: 0;
        }
        #desc{
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .box > ul{
            position: absolute;
            left: 0;
            bottom: 45px;
            width: 100%;
            height: 20px;
            text-align: center;
        }
        .box > ul > li{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #808080;
            display: inline-block;
            margin-right: 3px;
        }
        .box ul > li.active{
            background-color: #ffa500;
        }
    </style>
</head>
<body>
    <!-- 1.布局 -->
    <div class="box" id = "box">
      
       <img src="./images/1.jpg" alt="" id="img"> 

       <!-- shift from left to right -->
       <div class="leftbtn" id="leftbtn"></div>
       <div class="rightbtn" id="rightbtn"></div>

       <!-- sequence -->
       <p id="sequence">1/4</p>

       <!-- description -->
       <p id="desc">美女1</p>

       <!-- shift button -->
       <ul>
           <li class="active"></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>

       <script>
           /* 描述： 1--2---3---4-(判断)-1   4--3--2--1--(判断)-4
                    点击左右箭头, 将图片切换到对应的图片
           */
          //2. 点击右箭头, 图片往后移一个1--2--3--4--(判断)--1
          //2.1 获取box, 左右箭头, 图片img,序号, 描述, lis
          var box = document.getElementById("box");
          var rightbtn = document.getElementById("rightbtn");
          var leftbtn = document.getElementById("leftbtn");
          var img = box.getElementsByTagName("img")[0];
          var sequence = document.getElementById("sequence");
          var desc = document.getElementById("desc");
          var lis = box.getElementsByTagName('li');
          console.log(box,leftbtn,rightbtn,img,sequence,desc,lis);
          
          //2.2 用数组存储四张图片   
          var arr = ["./images/1.jpg","./images/2.jpg","./images/3.jpg","./images/4.jpg"]
          console.log(arr);
          
          //2.3 不知道当前什么状态, 假设为第一张图片
          var n = 0;
          //2.4 给右箭头添加点击事件
          rightbtn.onclick = function(){
                 // 切换到下一张 
                n++;  
                // 调用move()方法
                move();
               
          }  
          // 2.5  给左箭头添加点击事件
          leftbtn.onclick = function(){
                // 切换到前一张
                n--;  
                // 调用move()函数
                move();
          }
           /* 3. 点击切换按钮, 切换到对应图片
            */

            // 3.1 不知道是第几张图, 假设存一下
            // 对每一个li进行遍历
            for(var i = 0; i < lis.length; i++){
                // 使用自定义索引对i进行保存
                lis[i].index = i;
                lis[i].onclick = function(){
                    // 由于小圆点和图片一一对应, 小圆点的下标对应为图片的下标
                    // 用自定义索引切换n, 获取小圆点的下标
                    console.log(this.index);
                    // n随着小圆点改变
                    n = this.index;

                    // 调用函数
                    move();
                }
            }

          //  函数封装
          function move(){
            // 判断
            if(n > 3) n = 0;
            if(n < 0) n = 3;     
            console.log(n);
            // 修改图片地址
            img.src = arr[n];
            // 修改序号
            sequence.innerHTML = (n+1) + "/4";
            // 修改描述
            desc.innerHTML = "美女"+ (n+1);  

            // 更改小圆点背景色
            // 利用排他清空所有样式
            for(var j = 0; j < lis.length; j++){
                lis[j].className = '';
            }
            // 给当前点击的圆点添加active样式
            lis[n].className = 'active';
          }
       </script>
    </div>
</body>
</html>

3.图片切换之定时器切换

描述: 每隔3s, 将图片切换成下一张

间隔定时器: setInterval(函数, 时间) 时间单位: ms

每隔一段时间就让函数调用一次

应用: 轮播图、计数器、定时器、倒计时等

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切换图片</title>
</head>
<body>
    <img src="../img/1.jpg" alt="">
    <script>
        /* 
            数组存图片地址
         */
        var arr = ['../img/1.jpg','../img/2.jpg','../img/3.jpg','../img/4.jpg'];
        var img = document.getElementsByTagName('img')[0];

        // 每隔3s, 将图片切换成下一张
        // 不知道是第几张
        var n = 0;
        // 清除定时器
        clearInterval(img.t);
        img.t = setInterval(function(){
            // 将图片切换成下一张 图片地址存储在arr数组中
            // 改变的是下标
            n++;
            // 判断是不是最后一张
            if(n == arr.length){
                n = 0;
                
            }
            console.log(arr[n]);
            // 改变图片的地址
            img.src = arr[n];
        }, 3000)
    </script>
</body>
</html>

夹心776655

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【Javascript】入门之实现图片切换与轮播

描述: 点击右箭头向后切换图片,切换到第四张返回第一张 1--2---3---4-(判断)-1 点击左箭头向前切换图片, 切换到第一张返回第四张 4--3--2--1-(判断)-4 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
复制链接

扫一扫

专栏目录