当前位置：网站首页>JS implementation of web page rotation map

JS implementation of web page rotation map

2022-04-23 06:54:00 【zjLOVEcyj】 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Shuffling figure </title>
  <style>
    a {
    
      text-decoration: none;
      font-size: 30px;
      display: none;
      z-index: 2;
    }
    a:nth-child(1) {
    
      position: absolute;
      left: 0px;
      top: 27px;
    }
    a:nth-child(2) {
    
      position: absolute;
      right: 0px;
      top: 27px;
    }
    ul {
    
      margin: 0;
      padding: 0;
    }
    .focus {
    
      position: relative;
      width: 300px;
      height: 100px;
      overflow: hidden;
    }
    ul {
    
      position: absolute;
      top: 0px;
      left: 0px;
      width: 400%;
    }
    ul li {
    
      float: left;
      list-style: none;
      width: 300px;
      height: 100px;
    }
    ul li:nth-child(1) {
    
      background-color: pink;
    }
    ul li:nth-child(2) {
    
      background-color: skyblue;
    }
    ul li:nth-child(3) {
    
      background-color: purple;
    }
    ul li:nth-child(4) {
    
      background-color: pink;
    }
    ol {
    
      position: absolute;
      left: 106px;
      bottom: 11px;
      margin: 0;
      padding: 0;
    }
    ol li {
    
      float: left;
      list-style: none;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid #000;
      margin-left: 5px;
      cursor: pointer;
    }
    .current {
    
      background-color: #fff;
      border: 2px solid #fff;
    }
  </style>
</head>
<body>
  <div class="focus">
    <a href=""><</a>
    <a href="">></a>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ol>
    </ol>
  </div>

  <script>
    let focus = document.querySelector('.focus')
    let left = document.querySelectorAll('a')[0]
    let right = document.querySelectorAll('a')[1]
    let items = document.querySelectorAll('ul li')
    let ol = document.querySelector('ol')
    ul = document.querySelector('ul')
    //  Picture slide animation function 
    function animate (element, target, callback) {
    
      clearInterval(element.timer)
      element.timer = setInterval(() => {
    
        if (element.offsetLeft == target) {
    
          clearInterval(element.timer)
          callback && callback()
        } 
        let cur_distance = (target - element.offsetLeft) > 0 ? Math.ceil((target - element.offsetLeft) / 10) : Math.floor((target - element.offsetLeft) / 10)
        element.style.left = element.offsetLeft + cur_distance + 'px'
      }, 15)
    }
    for (let i = 0; i < items.length; i++) {
    
      let li = document.createElement('li')
      li.setAttribute('index', i)
      ol.append(li)
    }
    ol.children[0].className = 'current'
    focus.addEventListener('mouseenter', () => {
    
      left.style.display = 'block'
      right.style.display = 'block'
      clearInterval(timer)
      timer = null
    })
    focus.addEventListener('mouseleave', () => {
    
      left.style.display = 'none'
      right.style.display = 'none'
      timer = setInterval(() => {
    
      right.click()
    }, 2000)
    })
    ol.addEventListener('click', (e) => {
    
      if (e.target.tagName === 'OL') return
      for (let k of ol.children) {
    
        k.className = ''
      }
      e.target.className = 'current'
      let focusWidth = focus.offsetWidth
      let target =  -focusWidth * parseInt(e.target.getAttribute('index'))
      cur_index = parseInt(e.target.getAttribute('index'))
      circle = parseInt(e.target.getAttribute('index'))
      animate(ul, target)
    })
    let first = ul.children[0].cloneNode(true)
    ul.append(first)
    let cur_index = 0
    let circle = 0
    let flag = true
    right.addEventListener('click', (e) => {
    
      e.preventDefault()
      if (flag) {
    
        flag = false
        if (cur_index === 3) {
    
        ul.style.left = '0px'
        cur_index = 0
      }
      cur_index += 1
      animate(ul, -cur_index * focus.offsetWidth, function () {
    flag = true})
      circle += 1
      if (circle == 3) {
    
        circle = 0
      }
      for (let k of ol.children) {
    
        k.className = ''
      }
      ol.children[circle].className = 'current'
      }
      
    })
    left.addEventListener('click', (e) => {
    
      e.preventDefault()
      if (cur_index === 0) {
    
        ul.style.left = '-900px'
        cur_index = 3
      }
      cur_index -= 1
      animate(ul, -cur_index * focus.offsetWidth)
      circle -= 1
      if (circle == -1) {
    
        circle = 2
      }
      for (let k of ol.children) {
    
        k.className = ''
      }
      ol.children[circle].className = 'current'
    })

    //  Automatic wheel broadcasting 
    let timer = setInterval(() => {
    
      right.click()
    }, 2000)
  </script>
</body>
</html>

Insert picture description here

版权声明
本文为[zjLOVEcyj]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230555333398.html

边栏推荐

猜你喜欢

随机推荐