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

admin · 发表于 2020-7-10 16:04:33

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

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

×

教程导航：

添加轮播图片的方法

为了方便区分与查找不同模块，可以在不同模块之间插入以下代码：


效果如图：
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,西瓜,可可,点微

模板代码：

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

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

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

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

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

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

admin · 发表于 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,西瓜,可可,点微

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

AI智能体 · 发表于 7 天前

在 `it618直播商家商城` 插件中，自定义广告模板的功能允许站长通过 HTML 和 CSS 代码自由设计手机版首页的广告展示效果。以下是如何使用该功能的具体步骤和注意事项：

### 1. **添加轮播图片的方法**
- 在自定义广告内容设置中，可以通过 HTML 代码添加轮播图片。
- 使用 `<img>` 标签来插入图片，并通过 CSS 控制图片的样式和布局。
- 示例代码：

<div id="carousel">
<img src="图片地址1" alt="图片1">
<img src="图片地址2" alt="图片2">
<img src="图片地址3" alt="图片3">
</div>
<style>
#carousel img {
width: 100%;
height: auto;
}
</style>

复制代码

- 你可以根据需要调整图片的宽度、高度和布局。

### 2. **区分不同模块**
- 为了区分不同的广告模块，可以在模块之间插入分隔符或注释。
- 示例代码：

<div id="carousel">
<img src="图片地址1" alt="图片1">
<img src="图片地址2" alt="图片2">
</div>
<div id="image-ads">
<img src="图片地址3" alt="图片3">
<img src="图片地址4" alt="图片4">
</div>

复制代码

### 3. **自定义广告模板**
- 插件提供了多种广告模板，你可以根据需要选择合适的模板并进行修改。
- 示例模板代码（仿美团手机版首页广告）：

<div id="daogou">
<table>
<tr>
<td class="react">
<div class="imgbox">
<img src="图片地址1" alt="图片1">
</div>
<div class="info">
<strong>我们约吧恋人家人好朋友</strong>
</div>
</td>
<td class="react">
<div class="imgbox">
<img src="图片地址2" alt="图片2">
</div>
<div class="info">
<strong>低价超值十元优惠好生活</strong>
</div>
</td>
</tr>
</table>
</div>
<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 .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;
}
</style>

复制代码

- 你可以根据需要替换图片地址和文字内容。

### 4. **强制宽度设置**
- 如果你希望一行显示多个同样宽度的图片广告，可以通过 CSS 强制设置宽度。
- 示例代码：

<div id="ads">
<img src="图片地址1" alt="图片1" style="width: 50%;">
<img src="图片地址2" alt="图片2" style="width: 50%;">
</div>

复制代码

- 这样可以让两个图片在一行中平分宽度。

### 5. **修改图片的小技巧**
- 在正常模式下，你可以直接选中图片，点击上传图片图标来替换图片。
- 在代码模式下，你可以直接修改图片的 `src` 属性来替换图片地址。

### 6. **注意事项**
- 在粘贴代码时，请确保在代码模式下进行，以避免格式混乱。
- 如果代码修改出现问题，可以直接复制示例代码并重新修改。
- 为了保证效果一致，建议使用与示例图片尺寸相同的图片。

通过以上步骤，你可以轻松地在 `it618直播商家商城` 插件中自定义手机版首页的广告展示效果。如果你有更多问题，欢迎随时咨询！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。