实现简易轮播图效果

亦凉 2022-12-13 04:54 165阅读 0赞

所用知识点：

定时器

setInterval(function()\{

count();

\},1000)

每隔1000ms执行一次count函数

clearInterval() 停止setInterval方法

对元素进行修改:

对内容的修改 表单: ele.value

非表单: ele.innerText=' ' (结果只为文本)

ele.innerHTML=' ' (结果包含标签)

属性 固有属性(元素对象的属性) ele.attribute (ele.src)

ele\[attribute\] (ele\[attribute\])

两者之间的区别:.后面只能为属性值,不能为字符串

\[\]内的attribute可以为变量,而.后不可以

当设置的属性为class时,应写成ele.className,但是此方法相对复杂,可直接用

classList得到class的集合,其包含3个属性

ele.classList.add();

ele.classList.remove();

ele.classList.replace(old.new)

自定义属性(人为的,手动写在标签上的属性,HTML本身不支持)

以下三种方法既可以操作固有属性,又可以操作自定义属性

ele.getAttribute(属性名)

ele.setAttribute(属性名.属性值) //本身自带新增功能

ele.removeAttribute(属性名)

鼠标事件

onclick(点击)

ondblclick(双击)

onmousedown(鼠标按钮被按下)

onmouseup(鼠标按钮松开)

onmouseenter(鼠标移入)  onmouseleave(鼠标移出) // 不支持冒泡

onmouseover(鼠标移入) onmouseout(鼠标移出) // 支持冒泡

onmousemove(鼠标移动)

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>轮播</title>
      <style>
        * {
          padding: 0;
          margin: 0;
        }
    
        li {
          list-style: none
        }
    
        .wrapBox {
          width: 800px;
          margin: 100px auto;
          position: relative;
        }
    
        .swiperBox img {
          width: 100%;
          display: none;
        }
    
        .swiperBox .active {
          display: block;
        }
    
        .nav {
          position: absolute;
          right: 20px;
          bottom: 25px;
        }
    
        .nav li {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #000;
          float: left;
          margin: 0 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        .nav .active {
          background-color: red;
          color: #ffffff;
        }
      </style>
    </head>
    
    <body>
      <div class="wrapBox">
        <div class="swiperBox">
          <img class="active" src="img/t1.jpg" alt="">
          <img src="img/t2.jpg" alt="">
          <img src="img/t3.jpg" alt="">
          <img src="img/t4.jpg" alt="">
        </div>
        <ul class="nav">
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </body>
    <script>
    
      var oImgs = document.querySelectorAll('img');
      var oLis = document.querySelectorAll('.nav li');
      //利用全局变量来记录移动到哪张图片
      var index = 0;
      var timer;
    
      start();
      //运用事件循环绑定
      for (var i = 0; i < oLis.length; i++) {
        //为每一li传入对应的index值
        oLis[i].index = i;
        //当鼠标移入li时触发事件
        oLis[i].onmouseenter = function () {
          //清除定时器,使图片不在继续滚动
          clearInterval(timer);
          //记录下此时的li的index值,调用方法,显示此index值对应的图片
          index = this.index
          activeOne();
        }
        //当鼠标移出li时触发事件
        oLis[i].onmouseleave = function () {
          //调用定时器,自动播放图片
          start();
        }
      }
    
      function activeOne() {
        //删除所有激活事件
        for (var i = 0; i < oImgs.length; i++) {
          oImgs[i].classList.remove('active');
          oLis[i].classList.remove('active');
        }
        //将此时index值对应的图片及li样式激活
        oImgs[index].classList.add('active');
        oLis[index].classList.add('active');
      }
    
      function start() {
        clearInterval(timer);
        timer = setInterval(function () {
          //将图片的index值向下加一,调用下一张图片
          index++;
          //如果index值大于所有轮播图的长度时,index值恢复成0,显示第一张图
          if (index >= oImgs.length) {
            index = 0;
          }
          //调用方法,激活该index值对应样式
          activeOne();
        }, 2000)
      }
    </script>
    
    </html>