🎀 🌸

子比主题添加滚动图片广告位html小工具

📝 heardic 🏷️ Wordpress
📅 2024-01-31 ⏱️ 3 分钟 🔢 778 字
有问题请联系站长QQ2469329338
立即跳转

子比主题添加滚动图片广告位html小工具

011310

效果

子比主题添加滚动图片广告位html小工具插图

效果就是上图这样，图片自动滚动，挺适合做广告位，也可以放一些自己网站特色的内容宣传图。

将下面代码放置在小工具——自定义HTML即可

<div class="one">
    <ul style="left: -788px;">
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 0px;">APP封装 签名 分发</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 0px;">APP封装 签名 分发</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
    </ul>
 </div>
<div class="one">
    <ul style="left: -788px;">
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 0px;">APP封装 签名 分发</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 0px;">APP封装 签名 分发</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
    </ul>
 </div>
<div class="one">
    <ul style="left: -788px;">
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 0px;">APP封装 签名 分发</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 0px;">APP封装 签名 分发</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://images.aaym.net/2023/10/20231028131017464-image.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
    </ul>
 </div>
子比主题添加滚动图片广告位html小工具插图1

css样式：

放入自定义css中或者自行html中引入

.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 ;
}
.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 ;
}
.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 ;
}

js代码：

放入自定义js中，或者自行html引入

/* 有的浏览器第一次加载不会动画  刷新当前页面一次 可以不加的*///function reurl(){ 
    //url = location.href;var times = url.split("?"); 
    //if(times[1] != 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[index]).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()})    
               }  
 }      
})   
/* 有的浏览器第一次加载不会动画  刷新当前页面一次 可以不加的*///function reurl(){ 
    //url = location.href;var times = url.split("?"); 
    //if(times[1] != 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[index]).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()})    
               }  
 }      
})   
/* 有的浏览器第一次加载不会动画  刷新当前页面一次 可以不加的*///function reurl(){ 
    //url = location.href;var times = url.split("?"); 
    //if(times[1] != 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[index]).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()})    
               }  
 }      
})
本站资源均为网友推荐收集整理而来，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！
© 版权声明

本站资源大多来自网络，如有侵犯你的权益请联系管理员E-mail:2469329338@qq.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

如果遇到付费才可观看的文章，建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩，为防止有人压缩软件不支持7z格式，7z解压，建议下载7-zip，zip、rar解压，建议下载WinRAR。

THE END
Wordpress子比主题美化教程插件
点赞10
heardic的头像-诺言资源网永久会员
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容