欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

简易轮播图js

程序员文章站 2022-06-02 11:22:50
...

最终效果
简易轮播图js
所用知识点
定时器
每隔1000ms执行一次count函数
clearInterval() 停止setInterval方法

setInterval(function(){
        count();
    },1000)

对元素进行修改:

对内容的修改
表单: 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>

上一篇： 乐观锁和悲观锁的区别

下一篇： SparkRDD算子--map算子

推荐阅读