如果浏览器不支持Flash播放插件该怎么办?

CMS建站 admin 发布时间:2024-03-06 10:51:08 浏览:

 我们都知道现在很多浏览器都不自动支持Flash播放器了,这样导致网页打开后幻灯片无法播放了。出现下面的情况了。

nosupport.png

出现这样的问题怎么办呢?如果让客户在浏览器上再去安装播放器插件,就很麻烦,很多客户也不太会操作。那我们设计这个网页的时候应该如何处理呢?

别着急,马上安排!!!  

我们可以利用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>

 

这样就可以啦。

 

 

 

在线咨询

点击这里给我发消息售前咨询专员

点击这里给我发消息售后服务专员

在线咨询

免费通话

24h咨询:0475-2793529


如您有问题,可以咨询我们的24H咨询电话!

免费通话

微信扫一扫

微信联系
返回顶部