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

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

 更新時間：2024年01月16日 09:11:55   作者：幾何小超  
我們在各種網(wǎng)頁中經(jīng)常見到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實(shí)現(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實(shí)現(xiàn)輪播圖的效果

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

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

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

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

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

然后注冊點(diǎn)擊事件： 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注冊點(diǎn)擊事件
  next.addEventListener('click', function(){
    i++
    // 1.6判斷
    if(i>=8){
      i=0
    }
    toggle()
  })

2.右側(cè)的點(diǎn)擊事件和左側(cè)一樣，就是需要換一下判斷依據(jù)，還要獲取的元素。前幾章我已經(jīng)說過如何來得到對應(yīng)的對象，比如圖片，文字和背景顏色還有更新的小圓點(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得到對應(yīng)的對象
 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，最后講一個功能，這里我們依舊是在定時器上面聲明一個變量，因?yàn)槲覀兌〞r器也是有一直在懂，所以我們來這塊設(shè)定一個點(diǎn)擊事件

然后我們加了這樣一個功能，比如鼠標(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>輪播圖點(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>對人類來說會不會太超前了？</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注冊點(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得到對應(yīng)的對象
 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.自動播放
  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實(shí)現(xiàn)輪播圖效果的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)輪播圖效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

    js實(shí)現(xiàn)秒表計(jì)時器

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

    • 最新評論