京東輪播圖

以下輪播圖等等都可以用Swiper解決

Swiper講解

Swiper5 使用方法

首先加載插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下載Swiper文件或使用CDN。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</html>

HTML內容

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分頁器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要導航按鈕 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滾動條 -->
    <div class="swiper-scrollbar"></div>
</div>
導航等組件可以放在container之外

你可能想要給Swiper定義一個大小，當然不要也行。

.swiper-container {
    width: 600px;
    height: 300px;
}

初始化Swiper：最好是挨着</body>標籤

...
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切換選項
    loop: true, // 循環模式選項
    
    // 如果需要分頁器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前進後退按鈕
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滾動條
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  //不需要的模塊可以刪除
  </script>
</body>

或者創建一個專門寫輪播圖代碼的js，：最好是挨着</body>標籤

    <script src="./js/lunbotu.js"></script>
</body>

完成。恭喜你，現在你的Swiper應該已經能正常切換了。

Swiper插件相關配置選項

垂直切換選項

direction: ‘vertical’, // 垂直切換選項
默認horizontal
可設置水平(horizontal)或垂直(vertical)。

循環模式選項

loop: true, // 循環模式選項
默認false;
設置爲true 則開啓loop模式。loop模式：會在原本slide前後複製若干個slide(默認一個)並在合適的時候切換，讓Swiper看起來是循環的。
loop模式在與free模式同用時會產生抖動，因爲free模式下沒有複製slide的時間點。

自動輪播

-autoplay 默認：false

第一種：autoplay: true, //等同於以下設置
第二種： autoplay: {
delay: 3000,
//3秒輪播一次
stopOnLastSlide: false,
disableOnInteraction: false,
// 觸碰後自動切換也不會停止
},
disableOnInteraction 用戶操作swiper之後，是否禁止autoplay。默認爲true：停止。

slide切換效果

<div class=“swiper-slide”>Slide 1
<div class=“swiper-slide”>Slide 2
<div class=“swiper-slide”>Slide 3

slide的切換效果，默認爲"slide"（位移切換），可設置爲’slide’（普通切換、默認）,“fade”（淡入）“cube”（方塊）“coverflow”（3d流）“flip”（3d翻轉）。
京東圖片-SW1中圖片切換是淡入淡出

  // 淡入淡出
  effect: 'fade',
  fadeEffect: {
      crossFade: true,
  },

分頁器點擊切換和滑上切換

Swiper點擊分頁器切換slide

<div class=“swiper-slide”>Slide 1
<div class=“swiper-slide”>Slide 2
<div class=“swiper-slide”>Slide 3

分頁器變爲點擊切換，加一段下面JS
- clickableClass 可點擊的pagination的類名。

    // 如果需要分頁器
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        clickableClass: 'my-pagination-clickable',
    },

Swiper點擊分頁器切換slide改成滑上切換

分頁器由點擊切換改成滑上切換，加一段下面JS

//滑上分頁器小圓點span
$(".swiper-pagination .swiper-pagination-bullet").hover(function () {
    $(this).click(); //鼠標劃上去之後，自動觸發點擊事件來模仿鼠標劃上去的事件
})

更改輪播圖CSS樣式

例子
- html
- less

一個頁面設置多個輪播圖

html中，只需要給不同輪播圖的html代碼加不同id
JS中，只需要把每一個的第一個參數，換成你自定義每一個輪播圖的id就好

京東輪播圖-Swiper代碼

Sw1

                    <!--  swiper1-->
                    <div class="swiper-container" id="sw1">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="./images/banner2.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner3.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner2.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner4.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner5.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner6.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner7.jpg" alt=""></div>
                            <div class="swiper-slide"><img src="./images/banner8.jpg" alt=""></div>
                        </div>
                        <!-- 如果需要分頁器 -->
                        <div class="swiper-pagination"></div>

                        <!-- 如果需要導航按鈕 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>

// SW1  中
var mySwiper1 = new Swiper('#sw1', {
    direction: 'horizontal', // 垂直切換選項
    loop: true, // 循環模式選項
    // autoplay: true, //等同於以下設置
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        // 觸碰後自動切換也不會停止
        disableOnInteraction: false,
    },
    // 淡入淡出
    effect: 'fade',
    fadeEffect: {
        crossFade: true,
    },
    // 如果需要分頁器
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        clickableClass: 'my-pagination-clickable',
    },
    // 如果需要前進後退按鈕
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    // // 如果需要滾動條
    // scrollbar: {
    //     el: '.swiper-scrollbar',
    // },
})

Sw2

     <div class="swiper-container" id="sw2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href="javascript:;">
                                    <img src="./images/sw21.jpg" alt="">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/sw22.jpg" alt="">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/sw23.jpg" alt="">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="javascript:;">
                                    <img src="./images/sw22.jpg" alt="">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/sw23.jpg" alt="">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/sw21.jpg" alt="">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="javascript:;">
                                    <img src="./images/sw23.jpg" alt="">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/sw21.jpg" alt="">
                                </a>
                                <a href="javascript:;">
                                    <img src="./images/sw22.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <!-- 如果需要導航按鈕 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>

var mySwiper2 = new Swiper('#sw2', {
    direction: 'horizontal', // 垂直切換選項
    loop: true, // 循環模式選項
    // autoplay: true, //等同於以下設置
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        // 觸碰後自動切換也不會停止
        disableOnInteraction: false,
    },
    // 淡入淡出
    effect: 'fade',
    fadeEffect: {
        crossFade: true,
    },
    // 如果需要前進後退按鈕
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
})

API文檔

SwiperAPI

仿寫京東之所有輪播圖一個Swiper搞定

京東輪播圖

Swiper講解

Swiper5 使用方法

Swiper插件相關配置選項

垂直切換選項

循環模式選項

自動輪播

slide切換效果

分頁器點擊切換和滑上切換

Swiper點擊分頁器切換slide

Swiper點擊分頁器切換slide改成滑上切換

更改輪播圖CSS樣式

一個頁面設置多個輪播圖

京東輪播圖-Swiper代碼

Sw1

Sw2

API文檔

五大模式（原型模式）

JS中出現undefined和null情況

2020年Web前端面試題之Vue相關（最全，最詳細）

2020年Web前端面試題之原生JS（最全，最詳細）

枚舉屬性and封裝檢測對象的公有屬性

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結