如果浏览器不支持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