輪播圖 JS原生

時間 2019-11-16

原文原文鏈接

HTML

<body>
<!-- 輪播窗口 -->
 <div id="container" class="container">
      <div class="wrapper">
        <!-- <img src="./image/1.jpg" alt="" />
        <img src="./image/2.jpg" alt="" />
        <img src="./image/3.jpg" alt="" />
        <img src="./image/4.jpg" alt="" />
        <img src="./image/1.jpg" alt="" /> -->
      </div>

      <div class="focus">
        <!-- <span class="active"></span>
        <span></span>
        <span></span>
        <span></span> -->
      </div>

      <a class="left" href="javascript:;"> < </a>
      <a class="right" href="javascript:;"> > </a>
    </div>
</body>



複製代碼

CSS

.container {
        position: relative;
        width: 700px;
        height: 300px;
        margin: 30px auto;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      }
      .wrapper {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        width: 3500px;
        height: 300px;
      }

      .wrapper > img {
        display: block;
        width: 700px;
      }

      .focus {
        display: flex;
        position: absolute;
        bottom: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        left: 50%;
        transform: translateX(-50%);
        padding: 3px;
        border-radius: 8px;
      }

      .focus span {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #ffffff;
        margin: 0 3px;
        cursor: pointer;
      }

      .focus span.active {
        background-color: orange;
      }

      .container .left, .container .right {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 30px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 35px;
        font-weight: 100;
        color: #ffffff;
        background: rgba(0, 0, 0, 0.5);
        text-decoration: none;
      }

      .container .left {
        left: 5px;
      }

      .container .right {
        right: 5px;
      }


複製代碼

JS

const { toJSON, css } = window._utils

// 獲取圖片數據
const getInitData = (callback) => {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', './data.json', false)
  xhr.onreadystatechange = function() {
    if (this.readyState === 4 && /^2\d{2}$/.test(this.status)) {
      callback(toJSON(this.responseText))
    }
  }
  xhr.send()
}

// 獲取操做元素
const $ = selector => document.querySelector(selector)
const container = $('#container')
const wrapper = $('#container>.wrapper')
const focus = $('#container>.focus')

const slideList = wrapper.getElementsByTagName('img')

// 輪播視口寬度
const wid = container.clientWidth

let len = 0

// 渲染函數
const renderer = (data) => {
  let slideStr = ''
  let focusStr = ''
  data.forEach((item, idx) => {
    slideStr += `<img src="${item.img}" alt="" />`
    focusStr += `<span class="${idx === 0 ? 'active' : ''}"></span>`
  })
  slideStr += `<img src="${data[0].img}" alt="" />`

  wrapper.innerHTML = slideStr
  css(wrapper, 'width', wid * slideList.length )
  len = slideList.length

  focus.innerHTML = focusStr
}

// 回調函數：把一個函數做爲參數 傳入到另外一個函數裏面執行 sort((a, b) => a - b)

// 把renderer函數做爲回調函數 傳入到getInitData裏面
// 獲取初始數據並渲染
getInitData(renderer)

container.step = 0
function nextStep(flag) { // flag 'left' : 'right'
  // if (!isNaN(flag)) {
  //   container.step = flag
  // } else if ( flag === 'left') {
  //   container.step--
  // } else {
  //   container.step++
  // }
  !isNaN(flag) ? container.step = flag : (flag === 'left' ? container.step-- : container.step++)

  // 右邊邊界判斷處理
  // len - 1 最後一張圖片的索引（和第一張如出一轍的圖片）
  let lastIdx = len - 1
  if (container.step > lastIdx ) {
    css(wrapper, 'left', 0)
    container.step = 1
  }

  // 左邊邊界處理
  // step < 0
  if (container.step < 0) {
    css(wrapper, 'left',lastIdx * -wid)
    container.step = lastIdx - 1
  }

  $animate({
    ele: wrapper,
    target: {
      left: container.step * -wid
    }
  })
  changeColor(container.step)
}

container.timer = null
function autoMove() {
  container.timer = setInterval(nextStep, 2000)
}

autoMove()

container.onmouseover = function () {
  clearInterval(this.timer)
  left.style.display = right.style.display = 'block'
}

container.onmouseout = function() {
  autoMove()
  left.style.display = right.style.display = ''
}


const left = $('#container>.left')
const right = $('#container>.right')

left.onclick = function() {
  nextStep('left')
}

right.onclick = nextStep

const focusList = focus.getElementsByTagName('span')
for (let i = 0; i < focusList.length; i++) {
  focusList[i].onclick = function() {
    nextStep(i)
  } 
}

function changeColor(idx) {
   (idx === len - 1) && (idx = 0)
   for (let i = 0; i < focusList.length; i++) {
     i === idx ? focusList[i].classList.add('active') : focusList[i].classList.remove('active')
   }
}



複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。