网页轮播图

步骤：

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

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