社区 › 站长之家 › 子比主题 – 首页滚动图片广告区块

飞流 发表于 2025-10-6 19:50:14

子比主题 – 首页滚动图片广告区块

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


代码部署

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

<div class="one">
    <ul style="left: -788px;">
      <li><a href="https://www.tfbkw.com">
            <span style="width: 0px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 0px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
      <li><a href="https://www.tfbkw.com">
            <span style="width: 240px;">腾飞博客滚动图片广告位</span></a>
      </li>
    </ul>
</div>
<style>
.one {
margin: 10px auto;
height: 160px;
overflow: hidden;
position: relative;
width: 100%;
}

.one ul {
height: 160px;
width: 100000px;
position: absolute;
left: 0;
}
/*ul width的宽不能过小*/
.one ul li {
display: block;
float: left;
margin: 5px;
height: 150px;
border-radius: 20px;
position: relative;
}

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

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

.one ul li a span {
height: 0;
display: block;
background: #f9f9f9cc;
position: absolute;
bottom: 0;
color: #ff4f4f;
font-size: 0px;
}

.one ul li a:hover span {
height: 150px;
line-height: 150px;
font-size: 20px;
text-align: center;
transition: all 0.7s;
border-radius: 20px ;
}

.two {
margin: 50px auto;
height: 90px;

overflow: hidden;
position: relative;
}

.two ul {
height: 90px;
width: 100000px;
position: absolute;
left: 0;
}/*ul width的宽不能过小*/
.two ul li {
display: block;
float: left;
margin: 5px;
height: 80px;
border-radius: 20px;
position: relative;
}

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

.two ul li img {
display: block;
border-radius: 20px;
height: 80px;
}

.two ul li a span {
height: 0;
display: block;
background: #f9f9f9cc;
position: absolute;
bottom: 0;
color: #ff4f4f;
font-size: 0px;
}

.two ul li a:hover span {
height: 80px;
line-height: 80px;
font-size: 20px;
text-align: center;
transition: all 0.7s;
border-radius: 20px ;
}
</style>
<script>

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

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

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

               $Box_li.each(function(index){
                $($Box_li_span).width($(this).width());//hover
                s += $(this).outerWidth(true); //即要滚动的长度
            })
               
   window.requestAnimationFrame = window.requestAnimationFrame||function(Tmove){return setTimeout(Tmove,1000/60)};
   window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout;
               
               if( s>=$Box.width()){//如果滚动长度超出Box长度即开始滚动，没有的话就不执行滚动
                        $Box_li.clone(true).appendTo($Box_ul);                     
                        Tmove();
                           function Tmove(){
                              //运动是移动left从0到-s;（个人习惯往左滚）
                              left -= v;
                              if(left <= -s){left = 0;$Box_ul.css("left",left)}else{ $Box_ul.css("left",left) }
                                    timer = requestAnimationFrame(Tmove);   
                           }
                     $Box_ul.hover(function(){cancelAnimationFrame(timer)},function(){Tmove()})   
               }

}      
})   
</script>

查看完整版本: 子比主题 – 首页滚动图片广告区块