快捷導(dǎo)航

使用JavaScript實(shí)現(xiàn)輪播圖效果完整實(shí)例

更新時(shí)間：2024年01月16日 09:11:55 作者：幾何小超

我們?cè)诟鞣N網(wǎng)頁(yè)中經(jīng)常見(jiàn)到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實(shí)現(xiàn)輪播圖效果的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

最好今天分享一個(gè)使用JS制作的輪播圖效果

首先是HTML部分

<div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>對(duì)人類來(lái)說(shuō)會(huì)不會(huì)太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>

下一步是css部分

 * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }

之后就是來(lái)介紹一下JS實(shí)現(xiàn)輪播圖的效果

我們都知道輪播圖點(diǎn)一下右邊的箭頭或者是左邊的箭頭就可以滾動(dòng)頁(yè)面

所以我們第一步先做右邊的箭頭

還是先聲明一個(gè)數(shù)組，里面放了圖片，和文字和背景顏色

第一步我們先獲取三個(gè)元素，toggle()是一個(gè)方法調(diào)用，我是把左邊和右邊的寫在一個(gè)方法，顯示更加美觀，，然后呢我們執(zhí)行右側(cè)按鈕業(yè)務(wù)，還是先獲取右側(cè)按鈕，然后定義一個(gè)信息量i=0

因?yàn)槲覀兊膇需要進(jìn)行i++或者是i--的操作，所以在上面等單獨(dú)定義一個(gè)i=0，記住這里不能用const，只能用let

然后注冊(cè)點(diǎn)擊事件： next.addEventListener('click', function()，

但是當(dāng)我們輪播圖到了最后一個(gè)，需要往返第一個(gè)，這時(shí)候我們需要判斷，如果到了素組下標(biāo)為8的時(shí)候，我們就得返回第一個(gè)

// 1. 初始數(shù)據(jù)
    const sliderData = [
      { url: './images/slider01.jpg', title: '對(duì)人類來(lái)說(shuō)會(huì)不會(huì)太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '開(kāi)啟劍與雪的黑暗傳說(shuō)！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo廚出現(xiàn)了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉剛：讓世界通過(guò)B站看到東方大國(guó)文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快來(lái)分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解決你的電腦配置問(wèn)題?。?！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '誰(shuí)不想和小貓咪貼貼呢！', color: 'rgb(99, 72, 114)' },
    ]
   //獲取元素
   const img=document.querySelector('.slider-wrapper img')
   const p=document.querySelector('.slider-footer p')
   const footer=document.querySelector('.slider-footer')
  // 1右側(cè)按鈕業(yè)務(wù)
  // 1.1獲取右側(cè)按鈕
  const next=document.querySelector('.next')
  let i=0
 
  // 1.2注冊(cè)點(diǎn)擊事件
  next.addEventListener('click', function(){
    i++
    // 1.6判斷
    if(i>=8){
      i=0
    }
    toggle()
  })

2.右側(cè)的點(diǎn)擊事件和左側(cè)一樣，就是需要換一下判斷依據(jù)，還要獲取的元素。前幾章我已經(jīng)說(shuō)過(guò)如何來(lái)得到對(duì)應(yīng)的對(duì)象，比如圖片，文字和背景顏色還有更新的小圓點(diǎn)

// 2.左側(cè)按鈕
  const prev=document.querySelector('.prev')
  prev.addEventListener('click', function(){
    i--
    // 1.6判斷
    i=i<0?sliderData.length-1:i
   toggle()
  })
  function toggle(){
//公共部分
 // 1.3得到對(duì)應(yīng)的對(duì)象
 img.src=sliderData[i].url
    p.innerHTML=sliderData[i].title
    footer.style.backgroundColor=sliderData[i].color
    // 1.5更換小圓點(diǎn)
    document.querySelector('.slider-indicator .active').classList.remove('active')
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
  }

3，最后講一個(gè)功能，這里我們依舊是在定時(shí)器上面聲明一個(gè)變量，因?yàn)槲覀兌〞r(shí)器也是有一直在懂，所以我們來(lái)這塊設(shè)定一個(gè)點(diǎn)擊事件

然后我們加了這樣一個(gè)功能，比如鼠標(biāo)經(jīng)過(guò)盒子停止定時(shí)器，或者是離開(kāi)又開(kāi)始定時(shí)器的操作

通稱都用了這兩個(gè)事件

第一個(gè)是鼠標(biāo)經(jīng)過(guò)停止事件，第二個(gè)是開(kāi)始事件，這樣呢我們一個(gè)完整的輪播圖就做出來(lái)了

slider.addEventListener('mouseenter', function(){

slider.addEventListener('mouseleave', function()

// 3.自動(dòng)播放
  let timerId=setInterval(function(){
    next.click()
  },1000)
  // 4.鼠標(biāo)經(jīng)過(guò)大盒子，停止定時(shí)器
  const slider=document.querySelector('.slider')
  //注冊(cè)事件
  slider.addEventListener('mouseenter', function(){
    //停止定時(shí)器
    clearInterval(timerId)
  })
  // / 4.鼠標(biāo)經(jīng)過(guò)大盒子，開(kāi)啟定時(shí)器
  //注冊(cè)事件
  slider.addEventListener('mouseleave', function(){
    //停止定時(shí)器
    clearInterval(timerId)
   timerId = setInterval(function(){
    next.click()
  },1000)
  })

這是源碼

<!DOCTYPE html>
<html lang="en">

<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>輪播圖點(diǎn)擊切換</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>對(duì)人類來(lái)說(shuō)會(huì)不會(huì)太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev"><</button>
        <button class="next">></button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始數(shù)據(jù)
    const sliderData = [
      { url: './images/slider01.jpg', title: '對(duì)人類來(lái)說(shuō)會(huì)不會(huì)太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '開(kāi)啟劍與雪的黑暗傳說(shuō)！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo廚出現(xiàn)了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉剛：讓世界通過(guò)B站看到東方大國(guó)文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快來(lái)分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解決你的電腦配置問(wèn)題?。。?, color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '誰(shuí)不想和小貓咪貼貼呢！', color: 'rgb(99, 72, 114)' },
    ]
   //獲取元素
   const img=document.querySelector('.slider-wrapper img')
   const p=document.querySelector('.slider-footer p')
   const footer=document.querySelector('.slider-footer')
  // 1右側(cè)按鈕業(yè)務(wù)
  // 1.1獲取右側(cè)按鈕
  const next=document.querySelector('.next')
  let i=0
 
  // 1.2注冊(cè)點(diǎn)擊事件
  next.addEventListener('click', function(){
    i++
    // 1.6判斷
    if(i>=8){
      i=0
    }
    toggle()
  })
  // 2.左側(cè)按鈕
  const prev=document.querySelector('.prev')
  prev.addEventListener('click', function(){
    i--
    // 1.6判斷
    i=i<0?sliderData.length-1:i
   toggle()
  })
  function toggle(){
 // 1.3得到對(duì)應(yīng)的對(duì)象
 img.src=sliderData[i].url
    p.innerHTML=sliderData[i].title
    footer.style.backgroundColor=sliderData[i].color
    // 1.5更換小圓點(diǎn)
    document.querySelector('.slider-indicator .active').classList.remove('active')
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
  }

  // 3.自動(dòng)播放
  let timerId=setInterval(function(){
    next.click()
  },1000)
  // 4.鼠標(biāo)經(jīng)過(guò)大盒子，停止定時(shí)器
  const slider=document.querySelector('.slider')
  //注冊(cè)事件
  slider.addEventListener('mouseenter', function(){
    //停止定時(shí)器
    clearInterval(timerId)
  })
  // / 4.鼠標(biāo)經(jīng)過(guò)大盒子，開(kāi)啟定時(shí)器
  //注冊(cè)事件
  slider.addEventListener('mouseleave', function(){
    //停止定時(shí)器
    clearInterval(timerId)
   timerId = setInterval(function(){
    next.click()
  },1000)
  })
  </script>
</body>

</html>

總結(jié)

到此這篇關(guān)于使用JavaScript實(shí)現(xiàn)輪播圖效果的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)輪播圖效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

js
輪播圖

相關(guān)文章

詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案
這篇文章主要介紹了詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
Javascript運(yùn)行機(jī)制之Event Loop
這篇文章主要介紹了Javascript運(yùn)行機(jī)制之Event Loop，在學(xué)習(xí)Event Loop前，首先需要了解的幾個(gè)概念Javascript是單線程、任務(wù)隊(duì)列、同步任務(wù)、異步任務(wù)、Javascript執(zhí)行棧，下面來(lái)看看文章的詳細(xì)介紹吧
2021-12-12
這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο缶幊?，幫助大家更詳?xì)的對(duì)JS面向?qū)ο筮M(jìn)行學(xué)習(xí)，感興趣的朋友可以參考一下
2016-03-03

用瀑布流的方式在網(wǎng)頁(yè)上插入圖片的簡(jiǎn)單實(shí)現(xiàn)方法

下面小編就為大家?guī)?lái)一篇用瀑布流的方式在網(wǎng)頁(yè)上插入圖片的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

2016-09-09

HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳

這篇文章主要介紹了HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

2016-11-11

Nautil 中使用雙向數(shù)據(jù)綁定的實(shí)現(xiàn)

這篇文章主要介紹了Nautil 中使用雙向數(shù)據(jù)綁定的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

2019-10-10

js 動(dòng)態(tài)校驗(yàn)開(kāi)始結(jié)束時(shí)間的實(shí)現(xiàn)代碼

這篇文章主要介紹了js 動(dòng)態(tài)校驗(yàn)開(kāi)始結(jié)束時(shí)間的實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

2020-05-05