欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2024年01月16日 09:11:55   作者：幾何小超  
我們在各種網(wǎng)頁中經(jīng)常見到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實現(xiàn)輪播圖效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

首先是HTML部分

<div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>對人類來說會不會太超前了？</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;
    }

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

我們都知道輪播圖點一下右邊的箭頭或者是左邊的箭頭就可以滾動頁面

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

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

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

因為我們的i需要進(jìn)行i++或者是i--的操作，所以在上面等單獨定義一個i=0，記住這里不能用const，只能用let

然后注冊點擊事件： next.addEventListener('click', function()，

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

// 1. 初始數(shù)據(jù)
    const sliderData = [
      { url: './images/slider01.jpg', title: '對人類來說會不會太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '開啟劍與雪的黑暗傳說！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo廚出現(xiàn)了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉剛：讓世界通過B站看到東方大國文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快來分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解決你的電腦配置問題?。?！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '誰不想和小貓咪貼貼呢！', 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注冊點擊事件
  next.addEventListener('click', function(){
    i++
    // 1.6判斷
    if(i>=8){
      i=0
    }
    toggle()
  })

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

// 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得到對應(yīng)的對象
 img.src=sliderData[i].url
    p.innerHTML=sliderData[i].title
    footer.style.backgroundColor=sliderData[i].color
    // 1.5更換小圓點
    document.querySelector('.slider-indicator .active').classList.remove('active')
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
  }

3，最后講一個功能，這里我們依舊是在定時器上面聲明一個變量，因為我們定時器也是有一直在懂，所以我們來這塊設(shè)定一個點擊事件

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

通稱都用了這兩個事件

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

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

 slider.addEventListener('mouseleave', function()

// 3.自動播放
  let timerId=setInterval(function(){
    next.click()
  },1000)
  // 4.鼠標(biāo)經(jīng)過大盒子，停止定時器
  const slider=document.querySelector('.slider')
  //注冊事件
  slider.addEventListener('mouseenter', function(){
    //停止定時器
    clearInterval(timerId)
  })
  // / 4.鼠標(biāo)經(jīng)過大盒子，開啟定時器
  //注冊事件
  slider.addEventListener('mouseleave', function(){
    //停止定時器
    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>輪播圖點擊切換</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>對人類來說會不會太超前了？</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: '對人類來說會不會太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '開啟劍與雪的黑暗傳說！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo廚出現(xiàn)了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉剛：讓世界通過B站看到東方大國文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快來分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解決你的電腦配置問題！??！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '誰不想和小貓咪貼貼呢！', 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注冊點擊事件
  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得到對應(yīng)的對象
 img.src=sliderData[i].url
    p.innerHTML=sliderData[i].title
    footer.style.backgroundColor=sliderData[i].color
    // 1.5更換小圓點
    document.querySelector('.slider-indicator .active').classList.remove('active')
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
  }

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

</html>

總結(jié) 

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

相關(guān)文章

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

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

    下面小編就為大家?guī)硪黄闷俨剂鞯姆绞皆诰W(wǎng)頁上插入圖片的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09
  • HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳

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

    這篇文章主要介紹了HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-11-11
  • Nautil 中使用雙向數(shù)據(jù)綁定的實現(xiàn)

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

    這篇文章主要介紹了Nautil 中使用雙向數(shù)據(jù)綁定的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-10-10
  • js 動態(tài)校驗開始結(jié)束時間的實現(xiàn)代碼

    js 動態(tài)校驗開始結(jié)束時間的實現(xiàn)代碼

    這篇文章主要介紹了js 動態(tài)校驗開始結(jié)束時間的實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-05-05
  • js中數(shù)組的常用方法小結(jié)

    js中數(shù)組的常用方法小結(jié)

    這篇文章主要介紹了js中數(shù)組的常用方法,結(jié)合實例形式分析了js中的常用數(shù)組方法,如push、concat、pop、splice、reverse、join等功能與用法,需要的朋友可以參考下
    2016-12-12
  • 基于JavaScript編寫一個圖片轉(zhuǎn)PDF轉(zhuǎn)換器

    基于JavaScript編寫一個圖片轉(zhuǎn)PDF轉(zhuǎn)換器

    本文為大家介紹了一個簡單的 JavaScript 項目，可以將圖片轉(zhuǎn)換為 PDF 文件。你可以從本地選擇任何一張圖片，只需點擊一下即可將其轉(zhuǎn)換為 PDF 文件，感興趣的可以動手嘗試一下
    2022-07-07
  • js實現(xiàn)秒表計時器

    js實現(xiàn)秒表計時器

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)秒表計時器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-12-12

    • 最新評論