如果瀏覽器不支持Flash播放插件該怎么辦?
我們都知道現在很多瀏覽器都不自動支持Flash播放器了,這樣導致網頁打開后幻燈片無法播放了。出現下面的情況了。
出現這樣的問題怎么辦呢?如果讓客戶在瀏覽器上再去安裝播放器插件,就很麻煩,很多客戶也不太會操作。那我們設計這個網頁的時候應該如何處理呢?
別著急,馬上安排!!!
我們可以利用swiper這個萬能播放器來播放我們的幻燈片。下載地址
https://swiper.com.cn/download/index.html#file1
然后利用這個插件來播放我們的幻燈。
下面以帝國cms為例,在首頁上如何實現swiper幻燈的效果。下面是具體的步驟:
1.在swiper官方頁面下載最新的swiper壓縮包,大概是版本是11.0.3,下載解壓后,有個swiper目錄。然后把整個目錄上傳到網站的 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, // 循環模式選項
autoplay:true,//等同于以下設置
centeredSlides: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
這樣就可以啦。
相關推薦
- 工商銀行在線支付接口,B2C簽名infosec插件
- 瀚銀ecshop,thinkphp,shopnc在線支付接口,支付插件(pay
- 現代金控ecshop,thinkphp,shopnc在線支付接口,支付插件
- 首信易ecshop,thinkphp,shopnc在線支付接口,支付插件(p
- 環迅ecshop,thinkphp,shopnc在線支付接口,支付插件(pay
- 愛農ecshop,thinkphp,shopnc在線支付接口,支付插件(pay
- 杉德ecshop,thinkphp,shopnc在線支付接口,支付插件(pay
- 匯潮ecshop,thinkphp,shopnc在線支付接口,支付插件(pay
- 九派ecshop,thinkphp,shopnc在線支付接口,支付插件(pay
- 商銀信ecshop,thinkphp,shopnc在線支付接口,支付插件(p