js中滑動式輪播圖是怎麼實現的？-js教程-PHP中文網

首頁

web前端

js教程

js中滑動式輪播圖是怎麼實現的？

零下一度

Jul 09, 2017 am 09:40 AM

javascript 實現怎麼

這篇文章主要為大家詳細介紹了js實現從左向右滑動式輪播圖效果，具有一定的參考價值，有興趣的小夥伴們可以參考一下

輪播圖就是讓圖片每隔幾秒鐘自動滑動，達到圖片輪流播放的效果。輪播圖從效果來說有滑動式的也有漸入式的，滑動式的輪播圖就是圖片從左向右滑入的效果，漸入式的輪播圖就是圖片根據透明度漸漸顯示的效果，這裡說的是實現第一種效果的方法。

原理

相同大小的圖片並成一列，但只顯示其中一張圖片，其餘的隱藏，透過修改left值來改變顯示的圖片。

點選查看效果

html部分

　　nav為總容器，第一個ul列表#index為小圓點列表，滑鼠覆蓋哪個小圓點就顯現第幾張圖片，on是一個為小圓點添加背景顏色屬性的類別；第二個ul列表#img為圖片列表。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Carousel Figure</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<!--从左向右滑动-->
  <nav>
    <ul id="index">
      <li class="on"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul id="img">
      <li><img src="../images/img1.jpg" alt="img1"></li>
      <li><img src="../images/img2.jpg" alt="img2"></li>
      <li><img src="../images/img3.jpg" alt="img3"></li>
      <li><img src="../images/img4.jpg" alt="img4"></li>
      <li><img src="../images/img5.jpg" alt="img5"></li>
    </ul>
  </nav>
<script src="script.js"></script>
</body>
</html>

登入後複製

css部分

#圖片尺寸皆為720*405，這裡要注意以下幾點：

ul#img列表相對於nav是絕對定位的，#img的長度必須設定為所有圖片的總寬度，這樣圖片才可以並列一排顯示；

總容器nav的寬度必須設定為圖片的寬度720px,即只能顯示一張圖片，超出寬度的部分隱藏，即overflow: hidden；

小圓點列表應該在圖片列表上面顯示，故設定#img的z-index：-1；

小圓點列表是由一系列的li透過改變邊框樣式構成，故只需改變背景顏色即可達到移動小圓點的效果。

*{
  margin:0;
  padding:0;
}
nav{
  width: 720px;
  height: 405px;
  margin:20px auto;
  overflow: hidden;
  position: relative;
}
#index{
  position: absolute;
  left:320px;
  bottom: 20px;
 
}
#index li{
  width:8px;
  height: 8px;
  border: solid 1px gray;
  border-radius: 100%;
  background-color: #eee;
  display: inline-block;
}
#img{
  width: 3600px;/*不给宽高无法移动*/
  height: 405px;
  position: absolute;/*不定义absolute，js无法设置left和top*/
  z-index: -1;
}
#img li{
  width: 720px;
  height: 405px;
  float: left;
}
#index .on{
  background-color: black;
}

登入後複製

JS部分

#圖片移動函數moveElement()

　　moveElement函數需要取得圖片現在的位置以及目標位置併計算它們之間的差距進行移動，可以用offsetLeft和offsetTop取得圖片現在的位置。圖片移動時「劃過」的效果是將距離分成好10次進行移動，即利用setTimeOut函數，然而為了防止滑鼠懸停，需呼叫clearTimeout()函數，代碼如下：

function moveElement(ele,x_final,y_final,interval){//ele为元素对象
  var x_pos=ele.offsetLeft;
  var y_pos=ele.offsetTop;
  var dist=0;
  if(ele.movement){//防止悬停
    clearTimeout(ele.movement);
  }
  if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
    return;
  }
  dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
  x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
   
  dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
  y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
   
  ele.style.left=x_pos+&#39;px&#39;;
  ele.style.top=y_pos+&#39;px&#39;;
   
  ele.movement=setTimeout(function(){//分10次移动，自调用10次
    moveElement(ele,x_final,y_final,interval);
  },interval)
}

登入後複製

小圓點移動函數moveIndex()

#　　移動小圓點的實質是移動設定的背景顏色的類on，原理是先判斷哪個li上有背景顏色，有則去掉，讓所有的li都沒有背景，然後在對當前的li添加背景。

function moveIndex(list,num){//移动小圆点
  for(var i=0;i<list.length;i++){
    if(list[i].className==&#39;on&#39;){//清除li的背景样式
      list[i].className=&#39;&#39;;
    }
  }
  list[num].className=&#39;on&#39;;
}

登入後複製

圖片自動輪播

　　將以下程式碼直接寫在window.onload中即可。
　　這裡需要定義一個變數index，表示移動到第index（0~n-1，n為li的個數）張圖片。

var img=document.getElementById(&#39;img&#39;);
var list=document.getElementById(&#39;index&#39;).getElementsByTagName(&#39;li&#39;);
var index=0;//这里定义index是变量，不是属性
 
var nextMove=function(){//一直向右移动，最后一个之后返回
  index+=1;
  if(index>=list.length){
    index=0;
  }
  moveIndex(list,index);
  moveElement(img,-720*index,0,20);
};

登入後複製

圖片的自動輪播需要用到setInterval()函數，讓程式每隔幾秒鐘自動呼叫nextMove()函數：

var play=function(){
  timer=setInterval(function(){
    nextMove();
  },2500);
};

登入後複製

滑鼠覆寫小圓點效果

#　　要實作滑鼠覆寫哪個小圓點，就呈現對應的圖片這效果，需要知道滑鼠覆蓋的是哪個小圓點，這裡為每個li都加上一個自定的屬性index，使該屬性的值為對應的小圓點的序號i(0~n-1， n為li的個數)，這樣每次滑鼠覆蓋時只需取得index屬性的值即可知道滑鼠覆蓋的是哪個小圓點。注意，該index屬性和變數index沒有絲毫的關係，只有相同的名字。

for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
  list[i].index=i;//这里是设置index属性，和index变量没有任何联系
  list[i].onmouseover= function () {
    var clickIndex=parseInt(this.index);
    moveElement(img,-720*clickIndex,0,20);
    index=clickIndex;
    moveIndex(list,index);
    clearInterval(timer);
  };
  list[i].onmouseout= function () {//移开后继续轮播
    play();
  };
}

登入後複製

總結

#　　輪播圖的實作並不複雜，主要在於將圖片的移動行為和小圓點的移動行為分開，這樣就比較容易實現。這個輪播圖其實還是有點問題的，從最後一幅圖滑向第一個時滑動的距離較長，其實也很好解決，將滑動的方式改一下，這裡是根據-720*index來計算最終的left值，而index是將圖片的移動和小圓點的移動綁在一起，將滑動方式改成現在的offsetLeft+（-720），圖片的移動就可以與index值無關，然後在html檔案增加一圖片：

<li><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
<li><img src="../images/img1.jpg" alt="img1"></li>

登入後複製

然後在滑到最後一幅圖片時，迅速的將偏移量賦值0，變成第一幅，兩幅圖一樣，無法分辨其中變化，即可達到無縫連接。

if(x_pos==-3600){
  ele.style.left=&#39;0&#39;;
  ele.style.top=&#39;0&#39;;
}else{
  ele.style.left=x_pos+&#39;px&#39;;
  ele.style.top=y_pos+&#39;px&#39;;
}

登入後複製

以上是js中滑動式輪播圖是怎麼實現的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1677

CakePHP 教程

1431

Laravel 教程

1334

PHP教程

1280

C# 教程

1257

Related knowledge

華為手機如何實現雙微信登入？ Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入？隨著社群媒體的興起，微信已成為人們日常生活中不可或缺的溝通工具之一。然而，許多人可能會遇到一個問題：在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說，實現雙微信登入並不困難，本文將介紹華為手機如何實現雙微信登入的方法。首先，華為手機自帶的EMUI系統提供了一個很方便的功能－應用程式雙開。透過應用程式雙開功能，用戶可以在手機上同

PHP程式設計指南：實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具，能夠支援多種不同的程式設計邏輯和演算法。其中，實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中，將介紹如何使用PHP程式語言來實作斐波那契數列的方法，並附上具體的程式碼範例。斐波那契數列是一個數學上的序列，其定義如下：數列的第一個和第二個元素為1，從第三個元素開始，每個元素的值等於前兩個元素的和。數列的前幾元

如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視，微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號，方便管理和使用。在華為手機上實現微信分身功能並不困難，只需要按照以下步驟操作即可。第一步：確保手機系統版本和微信版本符合要求首先，確保你的華為手機系統版本已更新至最新版本，以及微信App

掌握Golang如何實現遊戲開發的可能性 Mar 16, 2024 pm 12:57 PM

在現今的軟體開發領域中，Golang（Go語言）作為一種高效、簡潔、並發性強的程式語言，越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發，並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言，Golang正在建構大型遊戲系統

PHP遊戲需求實作指南 Mar 11, 2024 am 08:45 AM

PHP遊戲需求實現指南隨著網路的普及和發展，網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲，而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求，並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中，遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性，例如姓名、等級、經驗值等，並提供方法來操作這些

如何在Golang中實現精確除法運算 Feb 20, 2024 pm 10:51 PM

在Golang中實現精確除法運算是一個常見的需求，特別是在涉及金融計算或其它需要高精度計算的場景中。 Golang的內建的除法運算子「/」是針對浮點數計算的，並且有時會出現精度遺失的問題。為了解決這個問題，我們可以藉助第三方函式庫或自訂函數來實現精確除法運算。一種常見的方法是使用math/big套件中的Rat類型，它提供了分數的表示形式，可以用來實現精確的除法運算

如何辨別耐吉鞋子的真假鞋盒（掌握一招輕鬆辨識） Sep 02, 2024 pm 04:11 PM

耐吉作為全球知名的運動品牌，其鞋子備受矚目。然而，市面上也存在大量的假冒偽劣商品，其中就包括假冒的耐吉鞋盒。辨別真假鞋盒對於保護消費者的權益至關重要。本文將為您提供一些簡單而有效的方法，以幫助您辨別真假鞋盒。一：外包裝標題透過觀察耐吉鞋盒的外包裝，可以發現許多細微的差異。真正的耐吉鞋盒通常具有高品質的紙質材料，手感光滑，且沒有明顯的刺激性氣味。正品鞋盒上的字體和標誌通常清晰、精細，並且沒有模糊或顏色不協調的情況。二：LOGO燙金標題耐吉鞋盒上的LOGO通常是燙金工藝，真品鞋盒上的燙金部分會呈現出

如何檢視和編輯SQL文件 Feb 26, 2024 pm 05:12 PM

SQL檔案是一種文字文件，通常包含了一系列的SQL語句。要開啟SQL文件，可以使用文字編輯器或專門的SQL開發工具。使用文字編輯器開啟SQL檔案最簡單的方法是使用文字編輯器，例如Windows中的記事本、Notepad++，或是Mac中的文字編輯器。以下是開啟SQL文件的步驟：首先，找到要開啟的SQL文件，右鍵點擊該文件，並選擇「開啟方式」。在彈出的視窗中

See all articles

js中滑動式輪播圖是怎麼實現的？

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題