PageAdmin网站内容管理系统(CMS)交流论坛

注册

 

QQ登录

只需一步,快速开始

发新话题 回复该主题

首页幻灯片怎么添加链接新方法,友情链接也可以同理,求加精 [复制链接]

1#
想在原来网站上的幻灯添加广告链接才发现加不了,这是我想的新的思路,希望对大家有所帮助。第一步,在信息表里新添加一个幻灯表,如下图:

第二步,在新添加的幻灯表里面增加URL和banner图片字段,如下图:

第三步,在网站-内容管理-幻灯片里面添加幻灯和URL地址,如下图:


第四步。在首页相关位置添加如下代码:
  1. <!--banner-->
  2. <div class="swiper-container">
  3.     <div class="swiper-wrapper">
  4.         @foreach (var item in Html.InfoDataList(new { Table = "dbanner",ShowNumber = 4 }))
  5.             {
  6.                 string url = item.Bannerurl;
  7.                 string thumbnail = item.Thumbnail;
  8.                 {
  9.             <div class="swiper-slide"><a href="@url" target="_blank"><img src="@thumbnail" /></a></div>
  10.         }
  11.                 }
  12.                 
  13.     </div>

  14.     <!-- 如果需要导航按钮 -->
  15.     <div class="swiper-button-prev"></div>
  16.     <div class="swiper-button-next"></div>

  17. </div>
  18. <script>
  19.     var mySwiper = new Swiper('.swiper-container', {
  20.         loop: true, // 循环模式选项
  21.                 //speed: 800,//切换速度,即两张图片交换的时间
  22.                  //effect: 'slide',//切换效果选择:'slide'(普通切换、默认),'fade'(淡入)'cube'(方块)'coverflow'(3d流)'flip'(3d翻转)
  23.         
  24.         // 如果需要前进后退按钮
  25.         navigation: {
  26.             nextEl: '.swiper-button-next',
  27.             prevEl: '.swiper-button-prev',
  28.         },
  29.         //是否循环
  30.             autoplay: {
  31.                 delay: 3000, //自动切换的时间间隔,即图片停留多少时间开始切换
  32.                 disableOnInteraction: false, //点击之后轮播是否禁止:默认停止:true:继续:false
  33.            },
  34.     })
  35. </script>
复制代码
分享 转发
TOP
2#

完美解决了我的幻灯片不会动的问题,大赞!
TOP
发新话题 回复该主题