亚洲最新在线观看_尤物91资源在线无码_av韩国在线免费_h无码动漫在线观看人

如果瀏覽器不支持Flash播放插件該怎么辦?

CMS建站 admin 發(fā)布時間:2024-03-06 10:51:08 瀏覽: 次

 我們都知道現(xiàn)在很多瀏覽器都不自動支持Flash播放器了,這樣導(dǎo)致網(wǎng)頁打開后幻燈片無法播放了。出現(xiàn)下面的情況了。

nosupport.png

出現(xiàn)這樣的問題怎么辦呢?如果讓客戶在瀏覽器上再去安裝播放器插件,就很麻煩,很多客戶也不太會操作。那我們設(shè)計這個網(wǎng)頁的時候應(yīng)該如何處理呢?

別著急,馬上安排?。?!  

我們可以利用swiper這個萬能播放器來播放我們的幻燈片。下載地址

https://swiper.com.cn/download/index.html#file1

然后利用這個插件來播放我們的幻燈。

下面以帝國cms為例,在首頁上如何實現(xiàn)swiper幻燈的效果。下面是具體的步驟:

1.在swiper官方頁面下載最新的swiper壓縮包,大概是版本是11.0.3,下載解壓后,有個swiper目錄。然后把整個目錄上傳到網(wǎng)站的 skin 目錄下。

2.然后在首頁模板中引入css和js文件

<link rel="stylesheet" href="/skin/swiper/swiper-bundle.min.css" />

<script src="/skin/swiper/swiper-bundle.min.js"></script>

3.然后是幻燈代碼如下:

  <!-- Swiper -->

  <div class="swiper mySwiper">

    <div class="swiper-wrapper">

 

[e:loop={"2",4,0,1}]

 

<div class="swiper-slide">

<a href="<?=$bqr[titleurl]?>" target="_blank">

<img src="<?=$bqr[titlepic]?>" alt="<?=$bqr[title]?>">

</a>

</div>

 

[/e:loop]

<!--

      <div class="swiper-slide">Slide 1</div>

      <div class="swiper-slide">Slide 2</div>

      <div class="swiper-slide">Slide 3</div>

      <div class="swiper-slide">Slide 4</div>

      <div class="swiper-slide">Slide 5</div>

      <div class="swiper-slide">Slide 6</div>

      <div class="swiper-slide">Slide 7</div>

      <div class="swiper-slide">Slide 8</div>

      <div class="swiper-slide">Slide 9</div>

-->

 

    </div>

    <div class="swiper-button-next"></div>

    <div class="swiper-button-prev"></div>

    <div class="swiper-pagination"></div>

  </div>

 

  <!-- Swiper JS -->

  <script src="/skin/swiper/swiper-bundle.min.js"></script>

 

  <!-- Initialize Swiper -->

  <script>

    var swiper = new Swiper(".mySwiper", {

      //spaceBetween: 30,

  //direction: 'vertical', // 垂直切換選項

  loop: true, // 循環(huán)模式選項

  autoplay:true,//等同于以下設(shè)置

      centeredSlides: true,

 

      pagination: {

        el: ".swiper-pagination",

        clickable: true,

      },

      navigation: {

        nextEl: ".swiper-button-next",

        prevEl: ".swiper-button-prev",

      },

    });

  </script>

 

這樣就可以啦。

 

 

 

在線咨詢

點擊這里給我發(fā)消息售前咨詢專員

點擊這里給我發(fā)消息售后服務(wù)專員

在線咨詢

免費通話

24h咨詢:0475-2793529


如您有問題,可以咨詢我們的24H咨詢電話!

免費通話

微信掃一掃

微信聯(lián)系
返回頂部