🎅挂件馆🌟铭牌馆✨️靓标库🧚‍♂️名人堂🦄宝可梦🍎水果机🥊猜拳🏧黑市🏧银行💹抽奖
   🎁
👮曝光台📜淘帖🧩导读👛帮助💰️钱包💖关注切换到宽版
  • 首页Portal
  • 社区BBS
  • 圈子
  • 资源
  • 商城
  • 任务
  • 家园Space
  • 排行Ranklist
    • 拍卖
    热搜 周润发 梨花 黑金 子比主题 死亡笔记 克米主题 GitHub 美化教程
    立即注册
    返回列表 发布新帖
    查看: 200|回复: 0

    [代码技巧] 子比主题 – 首页滚动图片广告区块

    [复制链接]
    飞流 00001
    起源之星
    任务·年会员
    累计签到LV.3
    摩羯座
    +1
    社区贡献
    346 216 24292
    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 175 颗
       贡献 : 14431 点
       金币 : 4 枚
    Icon在线时间 : 1952 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2026-8-16
    送礼物：3 个 收礼物：1 个
    FLLTCN 实名认证 特邀大神 诚信商家 信誉担保 精华作者+ 官方团队 vip vip-year 发表于 2025-10-6 19:50:14 | 查看全部 |阅读模式 浙江金华

    交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

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

    ×
    这是一款子比主题美化，是给子比主题首页自定义一个滚动图片广告的一个区块，需要html和css和js来进行完善这个区块，目前很多站长都在用，看起来非常美观的一个广告区块

    image.webp
    代码部署

    注意：部署成功之后有的浏览器第一次加载不会动画，刷新当前页面一次
    将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML代码即可，里面的文字和图片我都是一样的，你如果要改，你直接批量改就行，为了做了效果图我随便找了一个图片做的！

    1. <div class="one">
    2.     <ul style="left: -788px;">
    3.         <li><a href="https://www.tfbkw.com">
    4.             <span style="width: 0px;">腾飞博客滚动图片广告位</span></a>
    5.         </li>
    6.         <li><a href="https://www.tfbkw.com">
    7.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    8.         </li>
    9.         <li><a href="https://www.tfbkw.com">
    10.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    11.         </li>
    12.         <li><a href="https://www.tfbkw.com">
    13.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    14.         </li>
    15.         <li><a href="https://www.tfbkw.com">
    16.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    17.         </li>
    18.         <li><a href="https://www.tfbkw.com">
    19.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    20.         </li>
    21.         <li><a href="https://www.tfbkw.com">
    22.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    23.         </li>
    24.         <li><a href="https://www.tfbkw.com">
    25.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    26.         </li>
    27.         <li><a href="https://www.tfbkw.com">
    28.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    29.         </li>
    30.         <li><a href="https://www.tfbkw.com">
    31.             <span style="width: 0px;">腾飞博客滚动图片广告位</span></a>
    32.         </li>
    33.         <li><a href="https://www.tfbkw.com">
    34.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    35.         </li>
    36.         <li><a href="https://www.tfbkw.com">
    37.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    38.         </li>
    39.         <li><a href="https://www.tfbkw.com">
    40.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    41.         </li>
    42.         <li><a href="https://www.tfbkw.com">
    43.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    44.         </li>
    45.         <li><a href="https://www.tfbkw.com">
    46.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    47.         </li>
    48.         <li><a href="https://www.tfbkw.com">
    49.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    50.         </li>
    51.         <li><a href="https://www.tfbkw.com">
    52.             <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
    53.         </li>
    54.     </ul>
    55. </div>
    56. <style>
    57. .one {
    58. margin: 10px auto;
    59. height: 160px;
    60. overflow: hidden;
    61. position: relative;
    62. width: 100%;
    63. }

    65. .one ul {
    66. height: 160px;
    67. width: 100000px;
    68. position: absolute;
    69. left: 0;
    70. }
    71. /*ul width的宽不能过小*/
    72. .one ul li {
    73. display: block;
    74. float: left;
    75. margin: 5px;
    76. height: 150px;
    77. border-radius: 20px;
    78. position: relative;
    79. }

    81. .one ul li a {
    82. display: inline-block;
    83. height: 150px;
    84. }

    86. .one ul li img {
    87. border-radius: 20px;
    88. display: block;
    89. }

    91. .one ul li a span {
    92. height: 0;
    93. display: block;
    94. background: #f9f9f9cc;
    95. position: absolute;
    96. bottom: 0;
    97. color: #ff4f4f;
    98. font-size: 0px;
    99. }

    101. .one ul li a:hover span {
    102. height: 150px;
    103. line-height: 150px;
    104. font-size: 20px;
    105. text-align: center;
    106. transition: all 0.7s;
    107. border-radius: 20px ;
    108. }

    110. .two {
    111. margin: 50px auto;
    112. height: 90px;

    114. overflow: hidden;
    115. position: relative;
    116. }

    118. .two ul {
    119. height: 90px;
    120. width: 100000px;
    121. position: absolute;
    122. left: 0;
    123. }/*ul width的宽不能过小*/
    124. .two ul li {
    125. display: block;
    126. float: left;
    127. margin: 5px;
    128. height: 80px;
    129. border-radius: 20px;
    130. position: relative;
    131. }

    133. .two ul li a {
    134. display: inline-block;
    135. height: 80px;
    136. }

    138. .two ul li img {
    139. display: block;
    140. border-radius: 20px;
    141. height: 80px;
    142. }

    144. .two ul li a span {
    145. height: 0;
    146. display: block;
    147. background: #f9f9f9cc;
    148. position: absolute;
    149. bottom: 0;
    150. color: #ff4f4f;
    151. font-size: 0px;
    152. }

    154. .two ul li a:hover span {
    155. height: 80px;
    156. line-height: 80px;
    157. font-size: 20px;
    158. text-align: center;
    159. transition: all 0.7s;
    160. border-radius: 20px ;
    161. }
    162. </style>
    163. <script>

    165. /* 有的浏览器第一次加载不会动画  刷新当前页面一次 可以不加的*/
    166. //function reurl(){
    167.     //url = location.href;var times = url.split("?");
    168.     //if(times[1] != 1){url += "?1"; self.location.replace(url);}
    169. //}
    170. //onload=reurl ;
    171. /* 有的浏览器第一次加载不会动画  刷新当前页面一次 */

    173. $(document).ready(function () {
    174. var box0 = $(".one"),v0 = 0.5;
    175. var box1 = $(".two"),v1 = 1;
    176. Rin(box0,v0);
    177. Rin(box1,v1);

    179.       function Rin($Box,v){//$Box移动的对象，v对象移动的速率
    180.         var $Box_ul = $Box.find("ul"),
    181.             $Box_li = $Box_ul.find("li"),
    182.             $Box_li_span = $Box_li.find("span"),
    183.             left = 0,
    184.             s=0,
    185.             timer;//定时器

    187.                $Box_li.each(function(index){
    188.                 $($Box_li_span[index]).width($(this).width());//hover
    189.                 s += $(this).outerWidth(true); //即要滚动的长度
    190.               })
    191.                
    192.      window.requestAnimationFrame = window.requestAnimationFrame||function(Tmove){return setTimeout(Tmove,1000/60)};
    193.      window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout;
    194.                
    195.                if( s>=$Box.width()){//如果滚动长度超出Box长度即开始滚动，没有的话就不执行滚动
    196.                         $Box_li.clone(true).appendTo($Box_ul);                       
    197.                         Tmove();
    198.                            function Tmove(){
    199.                                 //运动是移动left  从0到-s;（个人习惯往左滚）
    200.                                 left -= v;
    201.                                 if(left <= -s){left = 0;$Box_ul.css("left",left)}else{ $Box_ul.css("left",left) }
    202.                                     timer = requestAnimationFrame(Tmove);   
    203.                            }
    204.                      $Box_ul.hover(function(){cancelAnimationFrame(timer)},function(){Tmove()})   
    205.                }  

    207. }      
    208. })   
    209. </script>
    复制代码

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复 送礼

    使用道具 举报

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

    本版积分规则

    飞流广播+ 发布

    		07-23 18:52
    飞流：这论坛到底有没有资本给我投资一下啊！
    		07-20 22:07
    系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。
    		02-21 02:22
    		01-24 12:40
    站内通告

    📢 六月份后均不在线，请悉知

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：1003810038钉推群：BAYR2383 站长QQ：3388700000

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    我的主题
    搜索
    快速回复
    返回列表

    • 下载飞流灵通APP

    • QQ群

    返回顶部

    只需一步极速注册

    数字靓号爱好者聚集地

    资源交易安全省心放心

    原创内容精品资源大放送

    飞流论坛（FLLT.CN），一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

    GMT+8, 2026-8-17 09:55 , Processed in 0.058375 second(s), 65 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

    Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

    快速回复 返回顶部 返回列表