云狐网

您现在的位置是:首页 > 网站建设 > cms系统

cms系统

帝国cms灵动标签调用swiper幻灯片的方法及插件下载

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

第一步,下载swiper幻灯片插件,放到skin目录下,比如放到skin目录下的banner目录xnA电脑_数码_手机应用问题解决的IT技术网站 - 云狐网

banner.zip
22a42b559dc273cdd48ee8f1b1d553ae.zip (366.75 KB)

帝国cms灵动标签调用swiper幻灯片的方法及插件下载xnA电脑_数码_手机应用问题解决的IT技术网站 - 云狐网

第二步,在模板,首页模板,添加样式表以及html代码:xnA电脑_数码_手机应用问题解决的IT技术网站 - 云狐网

①、在</header>之前,加入以下代码:xnA电脑_数码_手机应用问题解决的IT技术网站 - 云狐网
 xnA电脑_数码_手机应用问题解决的IT技术网站 - 云狐网

  1. <script src="[!--news.url--]skin/banner/js/jquery-3.6.0.min.js"></script> 
  2. <link rel="stylesheet" href="[!--news.url--]skin/banner/css/swiper.min.css"
  3. <script src="[!--news.url--]skin/banner/js/swiper.min.js"></script> 
  4. <script src="[!--news.url--]skin/banner/js/banner.js"></script> 
②、在首页放幻灯片的位置,换上以下代码:
  1. <div class="banner"
  2.     <div class="swiper-container"
  3.       <div class="swiper-wrapper"
  4.         <div class="swiper-slide"><img src="/skin/banner/img/1.jpg"></div> 
  5.         <div class="swiper-slide"><img src="/skin/banner/img/2.jpg"></div> 
  6.       </div> 
  7.       <div class="swiper-pagination"></div> 
  8.       <div class="swiper-button-next"></div> 
  9.       <div class="swiper-button-prev"></div> 
  10.     </div> 
  11. </div> 

注意:这一步 <div class="swiper-slide"><img src="/skin/banner/img/1.jpg"></div>是直接调用目录img下的图片,相当于是固定代码,以后替换不方便。xnA电脑_数码_手机应用问题解决的IT技术网站 - 云狐网

如果换成帝国cms灵动标签调用,通过后台上传和修改图片会方便很多。xnA电脑_数码_手机应用问题解决的IT技术网站 - 云狐网

第一种方案,调用插件-广告的图片xnA电脑_数码_手机应用问题解决的IT技术网站 - 云狐网
 xnA电脑_数码_手机应用问题解决的IT技术网站 - 云狐网

  1. <div class="banner"
  2.     <div class="swiper-container"
  3.       <div class="swiper-wrapper"
  4. <!--调用广告分类ID=1下的3条图片--> 
  5. [e:loop={"select picurl,url,adsay from {$dbtbpre}enewsad where classid=1 order by adid desc limit 3",0,24,0}] 
  6. <a href="<?=$bqr[url]?>" target="_blank"><div class="swiper-slide"><img src="<?=$bqr[picurl]?>" alt="<?=$bqr[adsay]?>"></div></a> 
  7. [/e:loop] 
  8.       </div> 
  9.       <div class="swiper-pagination"></div> 
  10.       <div class="swiper-button-next"></div> 
  11.       <div class="swiper-button-prev"></div> 
  12.     </div> 
  13. </div> 
第二种方案,调用新闻数据库表的推荐信息的标题图
  1. <div class="banner"
  2.     <div class="swiper-container"
  3.       <div class="swiper-wrapper"
  4. <!--调用news新闻信息下的5条信息,并且要有标题图片才能显示--> 
  5. [e:loop={'news',5,20,1,0,0}] 
  6.         <div class="swiper-slide"><a href="<?=$bqsr[titleurl]?>" target="_blank"><img src="<?=$bqr[titlepic]?>"></a></div> 
  7. [/e:loop] 
  8.       </div> 
  9.       <div class="swiper-pagination"></div> 
  10.       <div class="swiper-button-next"></div> 
  11.       <div class="swiper-button-prev"></div> 
  12.     </div> 
  13. </div> 
方案一和方案二都是在帝国cms经常会用到的幻灯片调用方式。这两种方式的调用,我建议从图片大小来考虑,比如1920*600这种宽屏的大图,建议用插件-广告的方式上传图片,然后调用方案就用第一种。如果说网站类似于门户新闻那种,第二种方案直接调用标题图会更方便。