用js手写一个轮播图

于 2022-05-05 17:30:18 发布
阅读量2.7k 收藏 20
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： javascript css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51705526/article/details/124593566

前言

emm, 简单弄一下js轮播图是怎么实现的吧, 前端答辩可能要用到这个!

代码实现

index.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>



  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .banner{
      width: 1300px;
      height: 700px;
      margin: auto;
      margin-top: 100px;
      border: 0px ;
      /* 设置为相对定位 */
      position: relative;
      /* 溢出的部分藏起来 */
      overflow: hidden;
      text-align: center;
      /* line-height: 300px; */
    }
    .banner:hover{
      width:1300px;
      height: 700px;
    }
    .banner .banner_pic .pic{
      /* p平时是藏起来的，看不到的 */
      display: none;
    }
    .banner .banner_pic current{
      /* 图片显示出来 */
      display: block;
    }
    .banner .banner_pic img{
      width: 1200px;
      height: 600px;
    }
    .banner ol{
      /* 给ol一个位置    绝对定位 */
      margin: auto;
      position:absolute;
      left: 500px;
      top: 620px;
    }
    .banner ol li{
      float: left;
      width: 100px;
      height: 10px;
      margin-left: 10px;
      list-style: none;
      border-radius: 15px;
    }
    .banner ol .but{
      border: 1px solid #eee;
    }
    .banner ol .current{
      background: #fe0048;
      border: 1px solid #fe0048;
    }
    .banner .left{
      width: 50px;
      height: 100px;
      background-image: url("https://figurebed-ladidol.oss-cn-chengdu.aliyuncs.com/img/202205051451472.png");
      position: absolute;
      left: 0px;
      top: 250px;
      cursor: pointer;
    }
    .banner .right{
      width: 50px;
      height: 100px;
      background-image: url("https://figurebed-ladidol.oss-cn-chengdu.aliyuncs.com/img/202205051451171.png");
      position: absolute;
      right: 0px;
      top: 250px;
      cursor: pointer;
    }

  </style>




  <script>
    //对每张图片设置索引号
    window.onload = function(){
      //记录图片的索引号
      var current_index = 0 ;
      // 获取所有的li
      var button_li = document.getElementById("button").getElementsByTagName("li");
      // 获取所有的图片
      var pic_div = document.getElementById("banner_pic").getElementsByTagName("div");
      //设置定时器(每3秒钟调用一次)
      var timer = window.setInterval(autoChange,3000);

      //图片的自动播放：
      function autoChange(){
        ++current_index;
        for(var i = 0 ; i < pic_div.length ; i++ ){//通过图片的个数进行循环，也可以通过获取按钮的个数进行循环，因为图片和按钮是一一对应的
          if(i == current_index){
            // 按钮的变化
            button_li[i].className="current";
            //图片的变化
            pic_div[i].className="current";
          }else{
            // 按钮的变化
            button_li[i].className="but";
            //图片的变化
            pic_div[i].className="pic";
          }
          //重头再来
          if(current_index==pic_div.length){
            current_index=0;
            i=-1;
          }
        }
      }





      // 鼠标移入小圆圈的时候转换图片的功能
      for(var i = 0 ; i < button_li.length ; i++ ){
        button_li[i].onmouseover = function(){
          //清除图片轮播:
          if(timer){//定时器存在时
            clearInterval(timer);
          }
          //移入显示相对应图片
          for(var j = 0 ; j < pic_div.length ; j++ ){
            if(button_li[j] == this){//this指的是button_li[i];---------------可以转换条件  i==j
              current_index = j ;
              //找到索引，让图片和按钮都变化
              // 按钮的变化
              button_li[j].className="current";
              //图片的变化
              pic_div[j].className="current";
            }else{
              // 按钮的变化
              button_li[j].className="but";
              //图片的变化
              pic_div[j].className="pic";
            }
          }
        }
        //鼠标移出的事件：(恢复定时器的自动播放)
        button_li[i].onmouseout= function(){
          timer = setInterval(autoChange,3000);
        }
      }




      //点击切换图片的效果
      var left = document.getElementById('left');
      var right = document.getElementById('right');
      left.onclick = function(){
        //清除图片轮播:
        if(timer){//定时器存在时
          clearInterval(timer);
        }
        var i = current_index ;
        if(current_index==0){
          current_index = pic_div.length;
          i = current_index;
        }
        --i;
        current_index--;
        swap(i);
      }

      right.onclick = function(){
        //清除图片轮播:
        if(timer){//定时器存在时
          clearInterval(timer);
        }
        var i = current_index ;
        if(current_index==pic_div.length-1){
          current_index = -1;
          i = current_index;
        }
        i++;
        ++current_index;
        swap(i);
      }

      function swap(i){
        for(var k =0 ; k < pic_div.length ; k++){
          if(k==i){
            // 按钮的变化
            button_li[k].className="current";
            //图片的变化
            pic_div[k].className="current";
          }else{
            // 按钮的变化
            button_li[k].className="but";
            //图片的变化
            pic_div[k].className="pic";
          }
        }
        timer = setInterval(autoChange,3000);
      }


    }

  </script>



</head>
<body background="https://figurebed-ladidol.oss-cn-chengdu.aliyuncs.com/img/202205051421279.jpg "style="background-repeat: no-repeat; background-size: 100% 100%; background-attachment: fixed;">

<div class="banner">
  <!-- 图片部分 -->
  <div id="banner_pic" class="banner_pic">
    <div class="current"><a href="#">
      <img src="https://figurebed-ladidol.oss-cn-chengdu.aliyuncs.com/img/202205051426174.jpeg" alt=""></a></div>
    <div class="pic">
      <img src="https://figurebed-ladidol.oss-cn-chengdu.aliyuncs.com/img/202205051426398.jpeg" alt=""></div>
    <div class="pic">
      <img src="https://figurebed-ladidol.oss-cn-chengdu.aliyuncs.com/img/202205051427281.jpeg" alt=""></div>
  </div>

  <div id="left" class="left"></div>
  <div id="right" class="right"></div>

  <!-- 圆圈部分 -->
  <!-- 使用无序列表实现 -->
  <ol id="button">
    <li class="current"></li>
    <li class="but"></li>
    <li class="but"></li>
  </ol>
</div>


</body>
</html>

细化过程

先搭建一个轮播图的形状样式

先用大盒子(banner)装当前展示的图片,左右两边的按钮和下面的几个椭圆按钮

image-20220505150821208

div.banner

<div class="banner">
  <!--用一个盒子banner来装整个轮播图, -->
  <!-- 图片部分 -->
  <div id="banner_pic" class="banner_pic">
    <div class="current"><a href="#">
      <img src="https://figurebed-ladidol.oss-cn-chengdu.aliyuncs.com/img/202205051426174.jpeg" alt=""></a></div>
    <div class="pic">
      <img src="https://figurebed-ladidol.oss-cn-chengdu.aliyuncs.com/img/202205051426398.jpeg" alt=""></div>
    <div class="pic">
      <img src="https://figurebed-ladidol.oss-cn-chengdu.aliyuncs.com/img/202205051427281.jpeg" alt=""></div>
  </div>

  <div id="left" class="left"></div>
  <div id="right" class="right"></div>

  <!-- 圆圈部分 -->
  <!-- 使用无序列表实现 -->
  <ol id="button">
    <li class="current"></li>
    <li class="but"></li>
    <li class="but"></li>
  </ol>
</div>

style.css

*{
    margin: 0;
    padding: 0;
}
.banner{
    width: 1300px;
    height: 700px;
    margin: auto;
    margin-top: 100px;
    border: 0px ;
    /* 设置为相对定位 */
    position: relative;
    /* 溢出的部分藏起来 */
    overflow: hidden;
    text-align: center;
    /* line-height: 300px; */
}
.banner .banner_pic .pic{
    /* p平时是藏起来的，看不到的 */
    display: none;
}
.banner .banner_pic current{
    /* 图片显示出来 */
    display: block;
}
.banner .banner_pic img{
    width: 1200px;
    height: 600px;
}
.banner ol{
    /* 给ol一个位置    绝对定位 */
    margin: auto;
    position:absolute;
    left: 500px;
    top: 620px;
}
.banner ol li{
    float: left;
    width: 100px;
    height: 10px;
    margin-left: 10px;
    list-style: none;
    border-radius: 15px;
}
.banner ol .but{
    border: 1px solid #eee;
}
.banner ol .current{
    background: #fe0048;
    border: 1px solid #fe0048;
}



/*左边箭头按钮的样式*/
.banner .left{
    width: 50px;
    height: 100px;
    background-image: url("https://figurebed-ladidol.oss-cn-chengdu.aliyuncs.com/img/202205051451472.png");
    position: absolute;
    left: 0px;
    top: 250px;
    cursor: pointer;
}
/*右边箭头按钮的样式*/
.banner .right{
    width: 50px;
    height: 100px;
    background-image: url("https://figurebed-ladidol.oss-cn-chengdu.aliyuncs.com/img/202205051451171.png");
    position: absolute;
    right: 0px;
    top: 250px;
    cursor: pointer;
}

代码拆分:只显示当前图片

.banner .banner_pic .pic{
    /* p平时是藏起来的，看不到的 */
    display: none;
}
.banner .banner_pic current{
    /* 当前的图片显示出来 */
    display: block;
}

js实现轮播

轮播基本要求实现

定时器

首先需要捕捉相应的界面对象(全部图片对象数组, 全部小椭圆对象数组,定时器)

//记录展示图片的索引号
var current_index = 0 ;
// 获取所有的小圆圈li
var button_li = document.getElementById("button").getElementsByTagName("li");
// 获取所有的图片
var pic_div = document.getElementById("banner_pic").getElementsByTagName("div");
//设置定时器(每3秒钟调用一次)
var timer = window.setInterval(autoChange,3000);

所以要形成轮播图, 就是在比如三秒钟的时间间隔换一张展示图片而已

定时器定时调用autoChange()方法, 按钮和图片形成一一对应的变化, 就像两个轮播图一样

//图片的自动播放：
function autoChange(){
    //每一次调用都会改变current当前展示图片的索引值
    ++current_index;
    for(var i = 0 ; i < pic_div.length ; i++ ){//通过图片的个数进行循环，也可以通过获取按钮的个数进行循环，因为图片和按钮是一一对应的
        if(i == current_index){
            // 按钮的变化
            button_li[i].className="current";
            //图片的变化
            pic_div[i].className="current";
        }else{
            // 按钮的变化
            button_li[i].className="but";
            //图片的变化
            pic_div[i].className="pic";
        }
        //重头再来
        if(current_index==pic_div.length){
            current_index=0;
            i=-1;
        }
    }
}

到此随着定时器所规定的的时间就能做出一个自动轮播图了

手动改变展示图片(小椭圆选择)

这里似乎就看到了js中for语句和事件的神奇结合, 咱们好好欣赏代码就好

// 鼠标移入小圆圈的时候转换图片的功能
for(var i = 0 ; i < button_li.length ; i++ ){
    button_li[i].onmouseover = function(){
        //清除图片轮播:
        if(timer){//定时器存在时, 杀掉定时器
            clearInterval(timer);
        }
        //移入显示相对应图片
        for(var j = 0 ; j < pic_div.length ; j++ ){
            if(button_li[j] == this){//this指的是button_li[i];---------------可以转换条件  i==j
                current_index = j ;
                //找到索引，让图片和按钮都变化
                // 按钮的变化
                button_li[j].className="current";
                //图片的变化
                pic_div[j].className="current";
            }else{
                // 按钮的变化
                button_li[j].className="but";
                //图片的变化
                pic_div[j].className="pic";
            }
        }
    }
    //鼠标移出的事件：(恢复定时器的自动播放)
    button_li[i].onmouseout= function(){
        timer = setInterval(autoChange,3000);
    }
}

对于每一次鼠标事件都会触发更换称当前图片的函数

手动改变展示图片(点击左右按钮)
//点击切换图片的效果
var left = document.getElementById('left');
var right = document.getElementById('right');
left.onclick = function(){
    //清除图片轮播:
    if(timer){//定时器存在时
        clearInterval(timer);
    }
    var i = current_index ;
    if(current_index==0){
        //如果当前处于第一个, 再往左走就要回到最后一张开始
        current_index = pic_div.length;
        i = current_index;
    }
    --i;
    current_index--;
    swap(i);
}

right.onclick = function(){
    //清除图片轮播:
    if(timer){//定时器存在时
        clearInterval(timer);
    }
    var i = current_index ;
    if(current_index==pic_div.length-1){
        //如果当前处于最后一张图片, 再往右边走就要回到第一张开始
        current_index = -1;
        i = current_index;
    }
    i++;
    ++current_index;
    
    //每一次点击都要更新一下图片
    swap(i);
}

function swap(i){
    for(var k =0 ; k < pic_div.length ; k++){
        if(k==i){
            // 按钮的变化
            button_li[k].className="current";
            //图片的变化
            pic_div[k].className="current";
        }else{
            // 按钮的变化
            button_li[k].className="but";
            //图片的变化
            pic_div[k].className="pic";
        }
    }
    timer = setInterval(autoChange,3000);
}

参考链接

解决Uncaught TypeError: Cannot set property ‘onclick’ of null错误的方法_wls.wang的博客-CSDN博客

【JavaScript】页面加载 解决Uncaught TypeError: Cannot set property of undefined at_码婆Doph的博客-CSDN博客

END

感谢之前py哥发给我的代码源文件.
水！都可以水！

评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

兴趣使然的小小

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值