817笔记（轮播图js）

2022-08-17 23:35:17 阅读：139 来源： 互联网

标签：function 轮播小圆圈 js ul arrow var circle 817

网页轮播图

步骤：

鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
点击右侧按钮一次，图片往左播放一次，以此类推，左侧按钮同理
图片播放的同时，下面小圆圈模块跟随一起变化
点击小圆圈，可以播放相应的图片
鼠标不经过轮播图，轮播图也会自动播放图片
鼠标经过轮播图，自动播放停止

js部分

// 1 获取元素
var arrow_l = document.querySelector('.arrow-l')
var arrow_r = document.querySelector('.arrow-r')
var focus = document.querySelector('.focus')
var focusWidth = focus.offsetWidth

var ul = focus.querySelector('ul')
var ol = focus.querySelector('.circle')

// 1 鼠标经过轮播图模块 focus 就显示隐藏左右按钮
focus.addEventListener('mouseenter', function () {
  arrow_l.style.display = 'block'
  arrow_r.style.display = 'block'

  // 6鼠标经过轮播图模块 自动播放停止
  clearInterval(timer)
  // 清除定时器变量
  timer = null
})

//1 离开隐藏左右按钮
focus.addEventListener('mouseleave', function () {
  arrow_l.style.display = 'none'
  arrow_r.style.display = 'none'
  // 7 鼠标不经过轮播图  轮播图自动播放
  timer = setInterval(function () {
    // 手动调用点击事件

    arrow_r.click()
  }, 2000)
})

// 3 图片播放的时候，小圆圈跟图片一起变化
// 3-1 循环遍历 创建小圆圈
// console.log(ul.children.length)
for (var i = 0; i < ul.children.length; i++) {
  //  创建li
  var li = document.createElement('li')
  // 记录当前小圆圈的索引号  通过自定义属性
  li.setAttribute('index', i)
  // 把小li插入到ol里面
  ol.appendChild(li)

  // 4 点击小圆圈 播放相应的图片
  li.addEventListener('click', function () {
    // 排他思想
    for (var j = 0; j < ol.children.length; j++) {
      ol.children[j].className = ''
    }
    // 当前的li添加类名
    this.className = 'current'
    // 点击小圆圈 移动图片  移动ul
    // 拿到当前点击的小圆圈的下标  图片和小圆圈一一对应
    var index = this.getAttribute('index')
    // 点击了小圆圈，把小圆圈的索引号给num
    num = index

    // 点击了小圆圈，把小圆圈的索引号给circle
    circle = index

    // 移动图片
    animate(ul, -num * focusWidth)
  })
}

// 把ol里面的第一个小圆圈 设置类名为 current
ol.children[0].className = 'current'

// 2-2克隆第一张图片li 放到ul最后面
var first = ul.children[0].cloneNode(true)
ul.appendChild(first)

// 2 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理
// num为图片的下标
var num = 0 //默认显示第一张
// circle控制小圆圈的播放
var circle = 0

// flag节流阀
var flag = true
arrow_r.addEventListener('click', function () {
  if (flag) {
    flag = false //关闭节流阀
    // 如果走到了最后一张，我们的ul 要快速复原  left值变为0
    if (num == ul.children.length - 1) {
      ul.style.left = 0
      num = 0 //目前第一张不会停留  把最后一张显示成第一张  真正的第一张不显示
    }
    num++ //2  3
    animate(ul, -num * focusWidth, function () {
      flag = true //打开节流阀
    }) //2  3

    // 小圆圈跟随图片一起变化
    circle++
    if (circle == ol.children.length) {
      circle = 0
    }

    circleChange()
  }
})
// 2点击左侧按钮
arrow_l.addEventListener('click', function () {
  if (flag) {
    flag = false
    if (num == 0) {
      num = ul.children.length - 1
      ul.style.left = -num * focusWidth + 'px'
    }
    num--
    animate(ul, -num * focusWidth, function () {
      flag = true
    })

    // 小圆圈跟随图片一起变化
    circle--
    circle = circle < 0 ? ol.children.length - 1 : circle

    circleChange()
  }
})

function circleChange() {
  for (var j = 0; j < ol.children.length; j++) {
    ol.children[j].className = ''
  }
  ol.children[circle].className = 'current'
}

// 5 定时器  轮播图自动播放
var timer = setInterval(function () {
  // 手动调用点击事件

  arrow_r.click()
}, 2000)

css部分

.main {
  width: 725px;
  height: 455px;
  margin: 100px auto;
  background-color: rebeccapurple;
}
.focus {
  position: relative;
  width: 721px;
  height: 455px;
  background-color: purple;
  overflow: hidden;
}
.focus ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 600%;
}
.focus ul li {
  float: left;
}
.arrow-l,
.arrow-r {
  display: none;
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 24px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  z-index: 3;
}
.arrow-r {
  right: 0;
}

.circle {
  position: absolute;
  bottom: 10px;
  left: 50px;
}
.circle li {
  float: left;
  width: 8px;
  height: 8px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  margin: 0 3px;
  border-radius: 50%;
  cursor: pointer;
}
.current {
  background-color: #fff;
}

html部分

<div class="main">
      <div class="focus">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l">&lt;</a>

        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r">&gt;</a>
        <!-- 滚动区域 -->
        <ul>
          <li>
            <a href="#">
              <img src="upload/focus.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="upload/focus1.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="upload/focus2.jpg" alt="" />
            </a>
          </li>
          <li>
            <a href="#">
              <img src="upload/focus3.jpg" alt="" />
            </a>
          </li>
        </ul>
        <!-- 小圆圈 -->
        <ol class="circle"></ol>
      </div>
    </div>
    <script src="./js/animate.js"></script>
    <script src="./js/index.js"></script>
  </body>

引入的封装动画

function animate(obj, target, callback) {
  // 先清除以前的定时器，保留当前的一个定时器执行
  clearInterval(obj.timer)
  obj.timer = setInterval(function () {
    // 步长 取整
    var step = (target - obj.offsetLeft) / 10
    step = step > 0 ? Math.ceil(step) : Math.floor(step)
    if (obj.offsetLeft == target) {
      // 停止动画
      clearInterval(obj.timer)
      callback && callback()
    }
    obj.style.left = obj.offsetLeft + step + 'px'
  }, 20)
}

节流阀

轮播图按钮连续点击造成播放过快，为了防止这种情况，我们要使用节流阀

目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续播放

思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

var flag=true

if(flag){
    flag=false   关闭节流阀
    do something
}
//动画执行完毕 flag=true 解锁

返回顶部

带有动画的返回顶部
动画封装函数
把所有的left相关的值改为跟页面垂直滚动距离相关就可以
页面滚动了多少，可以通过window.pageYOffset
最后页面滚动使用window.scroll(x,y)

仿淘宝固定侧边栏js部分

<script>
      // 1 获取元素
      var slidebar = document.querySelector('.slider-bar')
      var banner = document.querySelector('.banner')

      // banner.offsetTop banner元素距离body顶部的距离

      var bannerTop = banner.offsetTop
      // console.log(bannerTop)
      // 侧边栏固定定位之后应该变化的值
      var slidebarTop = slidebar.offsetTop - bannerTop
      // console.log(slidebar.offsetTop)

      // 获取main主体
      var main = document.querySelector('.main')
      var goBack = document.querySelector('.goBack')
      var mainTop = main.offsetTop

      // 页面滚动事件 scroll
      document.addEventListener('scroll', function () {
        // window.pageYOffset页面被卷走的头部     element.scrollTop 元素被卷去的头部
        // console.log(window.pageYOffset)
        // 1当我们页面被卷去的头部大于等于170 bannerTop  侧边栏就要改为固定定位
        if (window.pageYOffset >= bannerTop) {
          slidebar.style.position = 'fixed'
          slidebar.style.top = slidebarTop
        } else {
          slidebar.style.position = 'absolute'
          slidebar.style.top = '300px'
        }
        // 2当我们页面滚动到main盒子时，就显示goback
        if (window.pageYOffset >= mainTop) {
          goBack.style.display = 'block'
        } else {
          goBack.style.display = 'none'
        }
      })

      // 点击返回顶部按钮，让窗口滚动到页面的最上方
      goBack.addEventListener('click', function () {
        // 窗口滚动  对象是window
        animate(window, 0)
      })

      function animate(obj, target, callback) {
        // 先清除以前的定时器，保留当前的一个定时器执行
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {
          // 步长 取整
          var step = (target - window.pageYOffset) / 10
          step = step > 0 ? Math.ceil(step) : Math.floor(step)
          if (window.pageYOffset == target) {
            // 停止动画
            clearInterval(obj.timer)
            callback && callback()
          }
          // 设置滚动条的位置
          window.scroll(0, window.pageYOffset + step)
        }, 20)
      }
    </script>

标签：function,轮播,小圆圈,js,ul,arrow,var,circle,817
来源： https://www.cnblogs.com/mengxiaoye/p/16597191.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9