使用JavaScript實現輪播圖

阿新 • • 發佈：2019-01-13

經常能看到各種各樣的圖片輪播，下面就從簡單到複雜一步步完成一個圖片輪播效果

效果1

這一步需要實現的結果如下圖所示

關鍵點：

1、多張照片疊加，每次只能看到一張照片。

2、點選任意圓點，顯示對應順序的圖片（點選第一個圓點，顯示第一張圖片,第一個圓點改為紅色，點選第三個圓點，顯示第三張圖片，第三個圓點改為紅色）。

第二點的關鍵處在於，如何通過JavaScript得到點選的是第幾個圓點。轉換一下思路，點選的圓點是父標籤的第幾個子元素。

方法有二

1是使用sourceIndex。瀏覽器給每個標籤按順序分配了sourceIndex，若要知道是父標籤的第幾個子元素，父子兩個標籤的sourceIndex相減即可。

2是迴圈。設定變數index=1，確定點選的圓點，查詢圓點前面的兄弟節點，每找到一個index++。

var yuan;// 點選的圓點；
var index=0;
while(yuan=yuan.previousElementSilibing){
  index++;
}

完整程式碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        #img-3, #img-4, #img-2, #img-1 {
            width: 230px;
            height: 165px;
            position: absolute;
        }
        .img-hide {
            display: none;
        }
        .guide {
            height: 20px;
            position: absolute;
            top: 140px;
        }
        .guide span {
            width: 14px;
            height: 14px;
            display: inline-block;
            border-radius: 50%;
            background: #cdcdcd;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="img">
    <img src="../images/12.jpg"  class="img-1">
    <img src="../images/13.jpg"  class="img-1 img-hide">
    <img src="../images/14.jpg"  class="img-1 img-hide">
    <img src="../images/15.jpg"  class="img-1 img-hide">
</div>
<div class="guide">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<script type="text/javascript">
    var selectSpan = document.getElementsByClassName("guide")[0];
    var selectImg = document.getElementsByTagName("img");
    var nowSpan = document.getElementsByTagName("span");
    nowSpan[0].style.background="red";
    selectSpan.onclick = function (event) {
        var theTarget = event.target;
        var i = 0;
        // 是父元素的第幾個子元素
            while (theTarget = theTarget.previousElementSibling) {
                i++;
            }
        for (var j = 0; j < nowSpan.length; j++) {
            if (i == j) {
                selectImg[j].style.display = "block";
                nowSpan[j].style.background = "red";
            } else {
                selectImg[j].style.display = "none";
                nowSpan[j].style.background = "#cdcdcd";
            }
        }
    }
</script>
</body>
</html>

可以進一步完善的點

1、可以在左右兩個新增箭頭，點選箭頭切換圖片，若當前顯示的是第一張圖片，點擊向前的箭頭顯示最後一張圖片
2、圖片自動切換
so，接著一步一步實現上面提到的吧！

點選左右箭頭，切換圖片

實現思路如下：定義變數imgIndex儲存當前顯示的是第幾張圖片，點擊向前的箭頭imgIndex--；點擊向後的箭頭imgIndex++;

// 點擊向前的箭頭
imgIndex--;
if(imgIndex<0){
    imgIndex=imgNum-Math.abs(imgIndex);// imgNum圖片數目
}
imgSwitch(imgIndex) // 呼叫圖片切換展示函式

// 點擊向後的箭頭
imgIndex++;
if(imgIndex>=imgNum){
    imgIndex=imgIndex%imgNum;
}
imgSwitch(imgIndex);

另外，因為還通過第幾個圓點的顏色為紅色（其他顏色，其他狀況）來決定顯示第幾張圖片，，所以在點選前後箭頭或者圓點時需要同步imgIndex(顯示的是第幾張圖片），解決方法也簡單 imgIndex使用全域性變數即可。

圖片自動切換

實現思路也很簡單，每隔一段時間自動修改imgIndex的值，自動呼叫imgSwitch()函式。

setInterval(function(){
imgIndex++;
if(imgIndex>imgNum){
   imgIndex=imgIndex%imgUnm;
}
imgSwitch(imgIndex);
},3000)

完整效果檢視地址：這裡

javascript實現輪播圖效果

<!DOCTYPE html> <html> <head> <title>js輪播圖</title> <style type="text/css"> #container{ width: 600px;

使用JavaScript實現輪播圖

經常能看到各種各樣的圖片輪播，下面就從簡單到複雜一步步完成一個圖片輪播效果效果1這一步需要實現的結果如下圖所示關鍵點：1、多張照片疊加，每次只能看到一張照片。2、點選任意圓點，顯示對應順序的圖片（點選第一個圓點，顯示第一張圖片,第一個圓點改為紅色，點選第三個圓點，顯示第三張圖

JavaScript實現輪播圖，滑鼠移入暫停播放，滑鼠移除開始播放

沒有上傳本地圖片，可以自己新增圖片試一下"img/banner-bw.png"這是小圓點圖片點選可以定位到某一張圖片 <!DOCTYPE html> <html><head><meta charset="UTF-8"><

用javaScript實現輪播圖效果包括自動變換，按鈕控制，上一張下一張切換

1.HTML程式碼 <div id="wrap"> <img src="images/1.jpg" alt="" class="on"> <img src="images/2.jpg" alt=""> <im

js實現輪播圖

display lex tee 添加 har scrip con tle win 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

h5原生js實現輪播圖

list sla head log startx creat ase hit eve 預覽地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l

unslider插件實現輪播圖效果

地址 href aid jquery輪播 boot http 用法 .com r.js unslider插件下載地址（含有用法）：http://www.bootcss.com/p/unslider/ 可以　　下載unslider.js文件（http://pan.baidu.

vue-awesome-swiper實現輪播圖

install mys cti turn fff rip 引入 save data 1.首先通過npm安裝vue-awesome-swiper，我在項目中用的是2.6.7版本 npm install [email protected] –save 2.

jQuery實現輪播圖效果

代碼實現 idt 代碼 out 顯示 move posit 技術輪播圖任務實現：用jQuery實現輪播圖。來自瓶子啊之小白，歡迎來訪，歡迎指導。相信大家從事前端的開發者初級就是輪播圖，首先我用jquery寫了一個，第二篇我會用原生JavaScript給大家展示。其原

利用js來實現輪播圖

由於現在很多網站都有輪播圖的存在，所以自己的學著來搗鼓一下下，內容有點長！（1）、首先要先製作好html頁面，利用div盒子來佈局 &nb

android實現輪播圖

實現輪播圖新增依賴 compile 'com.youth.banner:banner:1.4.10' compile 'com.github.bumptech.glide:glide:3.7.0' 程式碼： package com.bdsx.tiantianzhu

原生js實現輪播圖原理分析

一、輪播圖需求輪播圖需要實現左右翻頁的無縫連線需要點選左右切換需要實現跳轉顯示當前位置的小圓點二、輪播圖的原理 1.圖片移動實現原理：利用浮動將所有所有照片依次排成一行，給這一長串圖片新增一個父級的遮罩，每次只顯示一張圖，其餘的都隱

IOS開發學習筆記十三 UIScrollView控制元件實現輪播圖

效果圖：專案地址程式碼： #import "ViewController.h" @interface ViewController ()<UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet

微信小程式實現輪播圖

swiper的相關屬性 indicator-dots 是否顯示小圓點，也可以自己重新設定小圓點 circular 是否銜接滑動，就是實現無限滾動 previous-margin 與上一張圖片的間距 next-margin 與下一張圖片的間距 autoplay 實現自動滾

原生js實現輪播圖原理

輪播圖的原理1.圖片移動實現原理：利用浮動將所有所有照片依次排成一行，給這一長串圖片新增一個父級的遮罩，每次只顯示一張圖，其餘的都隱藏起來。對圖片新增絕對定位，通過控制left屬性，實現照片的移動。 2.圖片移動動畫原理：從a位置移動到b位置，需要先計算兩點之間的差值，通過差值和時間間隔，計算出每次移動的步

JQuery實現輪播圖原始碼

設計：根據上圖可以看出，輪播圖需要以下元素：外面的盒子div、放置圖片集合的盒子ul、放置兩側按鈕的盒子div、下側順序按鈕div 原始碼如下：一、html原始碼如下： <div class="outer"> <ul class="

bootstrap實現輪播圖

<html> <head> <title>Bootstrap 輪播</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bo

MVP+Recycleview實現輪播圖實現京東秒殺效果

MVP+Recycleview實現輪播圖，京東秒殺 2018年12月02日 19:55:26 遷就 閱讀數：830 1：先看看效果 2：build.gradle中匯入依賴 //依賴 implementation ‘com.jakewharton:butterkn

Android 實現輪播圖效果底部圓點佈局實現

1、準備底部圓點的素材、利用Drawable的功能，去實現一個圓點圖片的展示 drawable下新建兩個Drawable resource file：dot_normal.xml和dot_select.xml dot_normal.xml <?xml vers

Android 實現輪播圖效果（三）底部圓點狀態改變

自動輪播和手動輪播之後應該實現圓點的切換自定義改變圓點狀態的監聽器新建介面public interface DotChangeListener，新增方法void dotChangeListener(int index);並在ImageBannerFramLayout實

使用JavaScript實現輪播圖

效果1

可以進一步完善的點

點選左右箭頭，切換圖片

圖片自動切換

相關推薦