简易轮播图js

最新推荐文章于 2022-03-17 15:03:00 发布

哼,小呀么小胖子

最新推荐文章于 2022-03-17 15:03:00 发布

阅读量141

点赞数

分类专栏：前端面试题总结

本文链接：https://blog.csdn.net/qq_43412333/article/details/102562939

版权

前端面试题总结专栏收录该内容

45 篇文章 0 订阅

订阅专栏

最终效果
在这里插入图片描述
所用知识点
定时器
每隔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>

哼,小呀么小胖子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易轮播图js

最终效果所用知识点定时器每隔1000ms执行一次count函数clearInterval() 停止setInterval方法setInterval(function(){ count(); },1000)对元素进行修改:对内容的修改表单: ele.value非表单: ele.innerText=’ ’ (结果只为文本)ele.innerH...
复制链接

扫一扫

专栏目录