在帝国cms中可以直接使用标签[phomeflashpic]调用幻灯片,但是现在所有浏览器已经不支持flash了,但幻灯片几乎在每个网站中都占着重要的位置,都是在首页导航下出现,现在最流行的幻灯片是swiper,swiper还可以支持移动端手势滑动

第一步,将swiper幻灯片插件,放到skin目录下,比如放到skin目录下的banner目录

第二步,在模板,首页模板,添加样式表以及html代码:

①、在</header>之前,加入以下代码:

<script src="[!--news.url--]skin/banner/js/jquery-3.6.0.min.js"></script> 
<link rel="stylesheet" href="[!--news.url--]skin/banner/css/swiper.min.css"> 
<script src="[!--news.url--]skin/banner/js/swiper.min.js"></script> 
<script src="[!--news.url--]skin/banner/js/banner.js"></script>

②、在首页放幻灯片的位置,换上以下代码:

<div class="banner"> 
    <div class="swiper-container"> 
      <div class="swiper-wrapper"> 
        <div class="swiper-slide"><img src="/skin/banner/img/1.jpg"></div> 
        <div class="swiper-slide"><img src="/skin/banner/img/2.jpg"></div> 
      </div> 
      <div class="swiper-pagination"></div> 
      <div class="swiper-button-next"></div> 
      <div class="swiper-button-prev"></div> 
    </div> 
</div>

注意:这一步 <div class=”swiper-slide”><img src=”/skin/banner/img/1.jpg”></div>是直接调用目录img下的图片,相当于是固定代码,以后替换不方便。

如果换成帝国cms灵动标签调用,通过后台上传和修改图片会方便很多。

第一种方案,调用插件-广告的图片

<div class="banner"> 
    <div class="swiper-container"> 
      <div class="swiper-wrapper"> 
<!--调用广告分类ID=1下的3条图片--> 
[e:loop={"select picurl,url,adsay from {$dbtbpre}enewsad where classid=1 order by adid desc limit 3",0,24,0}] 
<a href="<?=$bqr[url]?>" target="_blank"><div class="swiper-slide"><img src="<?=$bqr[picurl]?>" alt="<?=$bqr[adsay]?>"></div></a> 
[/e:loop] 
      </div> 
      <div class="swiper-pagination"></div> 
      <div class="swiper-button-next"></div> 
      <div class="swiper-button-prev"></div> 
    </div> 
</div>

第二种方案,调用新闻数据库表的推荐信息的标题图

<div class="banner"> 
    <div class="swiper-container"> 
      <div class="swiper-wrapper"> 
<!--调用news新闻信息下的5条信息,并且要有标题图片才能显示--> 
[e:loop={'news',5,20,1,0,0}] 
        <div class="swiper-slide"><a href="<?=$bqsr[titleurl]?>" target="_blank"><img src="<?=$bqr[titlepic]?>"></a></div> 
[/e:loop] 
      </div> 
      <div class="swiper-pagination"></div> 
      <div class="swiper-button-next"></div> 
      <div class="swiper-button-prev"></div> 
    </div> 
</div>

方案一和方案二都是在帝国cms经常会用到的幻灯片调用方式。这两种方式的调用,我建议从图片大小来考虑,比如1920*600这种宽屏的大图,建议用插件-广告的方式上传图片,然后调用方案就用第一种。如果说网站类似于门户新闻那种,第二种方案直接调用标题图会更方便。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源