当前位置:   article > 正文

(五)原生js案例之图片切换功能

(五)原生js案例之图片切换功能

又一款轮播效果,功能又丰富了点,增加了初始化加载动画,可以参考思路

效果预览

请添加图片描述

代码实现

  • 静态页面
<div id="pic">
      <img src="" alt="" />
      <span>数量正在加载中...</span>
      <p>文字说明正在加载中...</p>
      <ul>
        <li class="active first"></li>
        <li class="second"></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 核心逻辑代码
 window.onload = function () {
        const oPic = document.getElementById('pic')
        const oImg = oPic.querySelector('#pic img')
        const oUl = document.querySelector('#pic ul')
        const oLi = oUl.querySelectorAll('#pic ul li')
        const oSpan = document.querySelector('#pic span')
        const oP = document.querySelector('#pic p')
        const arrUrl = [
          './images/img1.png',
          './images/img2.png',
          './images/img3.png',
          './images/img4.png'
        ]
        const arrText = [
          '这是第一张图片',
          '这是第二张图片',
          '这是第三张图片',
          '这是第四张图片'
        ]
        //初始化
        let num = 0
        init()
        function init() {
          oImg.src = arrUrl[num]
          oSpan.innerHTML = `数量:${num + 1} / 4`
          oP.innerHTML = arrText[num]
        }

        //点击切换图片
        for (var i = 0; i < oLi.length; i++) {
          oLi[i].index = i
          oLi[i].onclick = function () {
            num = this.index
            init()
            for (var i = 0; i < oLi.length; i++) {
              oLi[i].classList.remove('active')
            }
            this.classList.add('active')
          }
        }
      }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

功能比较简单,后面会逐步丰富业务功能

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/861912
推荐阅读
相关标签
  

闽ICP备14008679号