创意电子 › 技术教程区 › 运营教程 › it618直播商家商城it618插件手机版首页自定义广告模板 ...
创意电子 管理员

  • 最佳新人

    注册账号后积极发帖的会员

  • 活跃会员

    经常参与各类话题的讨论，发帖内容较有主见
  • 1420发帖数
  • 1327主题数
  • 2关注数
  • 19粉丝
最新资源上传
推荐下载
返回列表 发新帖
开启左侧

it618直播商家商城it618插件手机版首页自定义广告模板

[复制链接]
创意电子 发表于 2022-4-24 16:30:55 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
添加轮播图的方法

  1. <div id="banner">
  2.     <div class="swiper-container" id="bannerSwiper_ad1">
  3.     <div class="swiper-wrapper">

  5.     <div class="swiper-slide"><a href="图片链接1" target="_blank"><img class="img" src="图片地址1"/></a></div>
  6.     <div class="swiper-slide"><a href="图片链接2" target="_blank"><img class="img" src="图片地址2"/></a></div>
  7.     <div class="swiper-slide"><a href="图片链接3" target="_blank"><img class="img" src="图片地址3"/></a></div>

  9.         <div class="swiper-slide"><a href="" target="_blank"></a><a href="https://s.click.taobao.com/NQivxgw" target="_blank"><img src="https://img.alicdn.com/tfs/TB1A3dOQpXXXXboXXXXXXXXXXXX-440-180.jpg" width="440" height="180" alt="" /></a></div><div class="swiper-slide"><a href="" target="_blank"></a><a href="https://s.click.taobao.com/Ya5vxgw" target="_blank"><img src="http://gtms01.alicdn.com/tps/i1/TB1bB7dLFXXXXa4XVXXluMv0pXX-440-180.jpeg" width="440" height="180" alt="" /></a></div>
  10.     <div class="swiper-slide"><a href="https://s.click.taobao.com/wh1kxgw" target="_blank"><img class="img" src="https://img.alicdn.com/tfs/TB1p4c4QXXXXXb6aFXXXXXXXXXX-440-180.png"/></a></div><div class="swiper-slide"><a href="https://s.click.taobao.com/hCljxgw" target="_blank"><img class="img" src="https://img.alicdn.com/tps/TB1B2GdQXXXXXXPXFXXXXXXXXXX-440-180.jpg"/></a></div>
  11. <div class="swiper-slide"><a href="https://s.click.taobao.com/tRKjxgw" target="_blank"><img class="img" src="https://img.alicdn.com/imgextra/i3/2408881097/TB2U8IkjhlmpuFjSZPfXXc9iXXa_!!2408881097.jpg"/></a></div>
  12. <div class="swiper-slide"><a href="https://s.click.taobao.com/jsyixgw" target="_blank"><img class="img" src="https://img.alicdn.com/tfs/TB1zumJQFXXXXXKXpXXXXXXXXXX-440-180.png"/></a></div>
  13. <div class="swiper-slide"><a href="https://s.click.taobao.com/xKjixgw" target="_blank"><img class="img" src="https://img.alicdn.com/imgextra/i3/366168414/TB2fKFUjrJkpuFjy1zcXXa5FFXa-366168414.png"/></a></div>
  14. <div class="swiper-slide"><a href="https://s.click.taobao.com/whVixgw" target="_blank"><img class="img" src="https://img.alicdn.com/tfs/TB1DX.IQXXXXXcaaFXXXXXXXXXX-440-180.jpg"/></a></div>
  15. <div class="swiper-slide"><a href="https://s.click.taobao.com/x0Mixgw" target="_blank"><img class="img" src="https://img.alicdn.com/tfs/TB1LqdnQpXXXXXtXpXXXXXXXXXX-440-180.jpg"/></a></div>
  16. <div class="swiper-slide"><a href="https://s.click.taobao.com/Noshxgw" target="_blank"><img class="img" src="https://img.alicdn.com/tfs/TB1SmeaQpXXXXc1aXXXXXXXXXXX-440-180.jpg"/></a></div>
  17. <div class="swiper-slide"><a href="https://s.click.taobao.com/F5bhxgw" target="_blank"><img class="img" src="https://img.alicdn.com/tfs/TB1JQGXRXXXXXcWXXXXXXXXXXXX-440-180.jpg"/></a></div>
  18. <div class="swiper-slide"><a href="https://s.click.taobao.com/vUGhxgw" target="_blank"><img class="img" src="https://img.alicdn.com/tfs/TB1sE1lQpXXXXabXpXXXXXXXXXX-440-180.jpg"/></a></div>

  20.     </div>
  21.     </div>
  22.     <div id="bannerpagination_ad1" class="pagination"></div>
  23. </div>


  26. <script>
  27.     var mySwiper = new Swiper('#bannerSwiper_ad1',{
  28.         loop: true,
  29.         autoplay:6000,
  30.         speed:1000,
  31.         pagination: '#bannerpagination_ad1',
  32.         paginationClickable: true,
  33.         autoplayDisableOnInteraction:false,
  34.         grabCursor : true,
  35.         parallax:true,
  36.       });
  37. </script>
复制代码
提示：以上绿色代码是已搞好的带链接的图片，天猫活动广告，图片还是很美观的，如果一时找不到广告，可以用这个，效果如下图轮播：


注意：一个轮播就是以上代码，如果你想再添加一个轮播就再添加一次以上代码，添加时红色代码序号要修改的，不要重复，如果是一个轮播内的图片，宽高比例一定要一致，这样就美观。
为了让手机版首页美观实用，插件加了一个自定义广告内容设置，可以自由编辑，为了方便，提供了一些模板：

简单的图片广告
<table width="100%">
<tr><td><a href="广告链接"><img src="广告图片" width="100%"></a></td><td>...</td><td>...</td></tr>
<tr>...</tr>
</table>

广告内容代码写在<td>与</td>中间，<tr>...</tr>算一行，<td>...</td>算一列，如果想强制宽度，比如一行显示2个同样宽度的图片广告可以这样：
<table width="100%">
<tr><td width="50%"><a href="广告链接"><img src="广告图片" width="100%"></a></td><td width="50%"><a href="广告链接"><img src="广告图片" width="100%"></a></td></tr>
</table>
一、仿美团手机版首页广告





模板代码：


  1. <style>
  2. #daogou{padding-top:6px; padding-bottom:5px}#daogou table{width:100%;}#daogou tr td{text-align:center;}#daogou .react{-webkit-box-flex:1;padding:0;border-left:1px solid #ddd;text-align:center}#daogou .imgbox{height:1.2rem;margin:auto;display:block}#daogou .react:first-child{margin-left:0;padding-left:0;border-left:0}#daogou .left{-webkit-box-flex:1}#daogou .info{vertical-align:top;text-align:left;display:inline-block}#daogou .info strong{display:block;color:#55a40f;font-size:13px;margin-top:6px;margin-bottom:10px}#daogou .huilife strong{color:#ff3f0d}#daogou .scense strong{color:#f742a0}#daogou small{display:block;font-size:11px;}
  3. </style>
  4. <div id="daogou">
  5.         <table>
  6.                 <tbody>
  7.                         <tr>
  8.                                 <td>
  9.                                         <a class="react" href="http://www.cnit618.com/mall_wap-product-14.html" rel="nofollow"> <span class="info"> <strong>我们约吧</strong> <small>恋人家人好朋友</small> </span> <img class="imgbox" src="http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png" /> </a>
  10.                                 </td>
  11.                                 <td style="border-left:#f1f1f1 1px solid;">
  12.                                         <a class="react huilife" href="http://www.cnit618.com/mall_wap-product-11.html" rel="nofollow"> <span class="info"> <strong>低价超值</strong> <small>十元优惠好生活</small> </span> <img class="imgbox" src="http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg" /> </a>
  13.                                 </td>
  14.                                 <td style="border-left:#f1f1f1 1px solid;">
  15.                                         <a class="react scense" href="http://www.cnit618.com/mall_wap-product-1.html" rel="nofollow"> <span class="info"> <strong>聚餐宴请</strong> <small>朋友家人常聚聚</small> </span> <img class="imgbox" src="http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png" /> </a>
  16.                                 </td>
  17.                         </tr>
  18.                 </tbody>
  19.         </table>
  20. </div>
复制代码
推荐在代码模式下修改内容，如果代码修改坏了，可以直接复制以上示例代码，再修改，这样方便些！
修改图片小技巧：可以在正常模式，直接选中图片，点上传图片图标，就可以直接替换图片了，如图：



直播 商家 手机版首页 首页 广告

相关帖子
回复

使用道具 举报

发布主题
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

猜你喜欢
在线客服邮箱
wxcy#wkgb.net

邮箱地址#换为@

Powered by 创意电子 ©2018-现在 专注资源实战分享源码下载站联盟商城