·设为首页收藏本站📧邮箱修改🎁免费下载专区🔐设置/修改密码👽群雄群聊
返回列表 发布新帖

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

365 1
发表于 2020-7-10 16:04:33 | 显示全部楼层 阅读模式

马上注册,免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
教程导航:

添加轮播图片的方法

为了方便区分与查找不同模块,可以在不同模块之间插入以下代码:
<!--=============================================模块1=============================================-->

效果如图:
it618直播商家商城it618插件手机版首页自定义广告模板 it618,西瓜,可可,点微



为了让手机版首页美观实用,插件加了一个自定义广告内容设置,可以自由编辑,为了方便,提供了一些模板:

简单的图片广告
<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>
一、仿美团手机版首页广告
it618直播商家商城it618插件手机版首页自定义广告模板 it618,西瓜,可可,点微


模板代码:



<style>
#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;}
</style>
<div id="daogou">
        <table>
                <tbody>
                        <tr>
                                <td>
                                        <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>
                                </td>
                                <td style="border-left:#f1f1f1 1px solid;">
                                        <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>
                                </td>
                                <td style="border-left:#f1f1f1 1px solid;">
                                        <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>
                                </td>
                        </tr>
                </tbody>
        </table>
</div>



以上蓝色部分是图片地址,你可以直接引用示例的,也可以自己上传图片。为了保证和示例的效果一样,如果想换图片请模仿示例图片

注意:复制以上代码粘贴时,请在代码模式下粘贴,如图:
it618直播商家商城it618插件手机版首页自定义广告模板 it618,西瓜,可可,点微

推荐在代码模式下修改内容,如果代码修改坏了,可以直接复制以上示例代码,再修改,这样方便些!


修改图片小技巧:可以在正常模式,直接选中图片,点上传图片图标,就可以直接替换图片了,如图:


it618直播商家商城it618插件手机版首页自定义广告模板 it618,西瓜,可可,点微

我要说一句 收起回复
最后回复时间:2020-07-10 16:08:07论坛官方发言人回复了此贴
  • admin admin 2020-07-10 16:08:07
一花一世界,一叶一追寻。一曲一场叹,一生为一人。

评论1

admin楼主Lv.9 发表于 2020-7-10 16:08:07 | 显示全部楼层

添加轮播图片的方法

代码如下:

<div id="banner">
    <div class="swiper-container" id="bannerSwiper_ad1">
    <div class="swiper-wrapper">

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

        <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>
    <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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>

    </div>
    </div>
    <div id="bannerpagination_ad1" class="pagination"></div>
</div>


<script>
    var mySwiper = new Swiper('#bannerSwiper_ad1',{
        loop: true,
        autoplay:6000,
        speed:1000,
        pagination: '#bannerpagination_ad1',
        paginationClickable: true,
        autoplayDisableOnInteraction:false,
        grabCursor : true,
        parallax:true,
      });
</script>

提示:以上绿色代码是已搞好的带链接的图片,天猫活动广告,图片还是很美观的,如果一时找不到广告,可以用这个,效果如下图轮播:

it618直播商家商城it618插件手机版首页自定义广告模板 it618,西瓜,可可,点微

注意:一个轮播就是以上代码,如果你想再添加一个轮播就再添加一次以上代码,添加时红色代码序号要修改的,不要重复,如果是一个轮播内的图片,宽高比例一定要一致,这样就美观。

我要说一句 收起回复
一花一世界,一叶一追寻。一曲一场叹,一生为一人。

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图

您的IP:18.117.183.150,220.169.152.77,GMT+8, 2024-5-2 14:53 , Processed in 0.200750 second(s), 85 queries , Gzip On, Redis On.

Based on Discuz! W1.0 Licensed

© 2001-2024 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表