搜索 登录
主题添加滚动图片广告位html小工具
添加到桌面

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

/ 0 评论 / 354 阅读 /1 赞
首页 › 技术教程 › 正文

美化图：

360截图20240316103310909.jpg
效果就是上图这样，图片自动滚动，挺适合做广告位，也可以放一些自己网站特色的内容宣传图。
滚动图片广告位html小工具美化，教程很简单，感兴趣的朋友可以测试。
将下面代码放置在小工具——自定义HTML即可

<div class="one">
    <ul style="left: -788px;">
       <li>
    <a href="/6862.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/886920182.png" width="200">
        <span style="width: 240px;">摄影人物风景写真类网站模板</span>
    </a>
</li>

             <li>
    <a href="/6872.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/565467114.png" width="200">
        <span style="width: 240px;">高端商务汽车租赁公司网站模板</span>
    </a>
</li>
              <li>
    <a href="/6864.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/3153286306.png" width="200">
        <span style="width: 240px;">浓缩果汁饮品类网站模板</span>
    </a>
</li>
             <li>
    <a href="/6866.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/2493472965.png" width="200">
        <span style="width: 240px;">土豆农业种植基地网站模板</span>
    </a>
</li>
              <li>
    <a href="/6868.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/3451492673.png" width="200">
        <span style="width: 240px;">茶叶茶具销售网站模板</span>
    </a>
</li>
             <li>
    <a href="/6825.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/854132503.png" width="200">
        <span style="width: 240px;">酒店宾馆客房类网站模板</span>
    </a>
</li>
              <li>
    <a href="/6814.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/2609185241.png" width="200">
        <span style="width: 240px;">果园果树种植园网站模板</span>
    </a>
</li>
              <li>
    <a href="/6815.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/1081012578.png" width="200">
        <span style="width: 240px;">服装设计服装厂商网站模板</span>
    </a>
</li>
              <li>
    <a href="/6817.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/780150693.png" width="200">
        <span style="width: 240px;">环境治理环保园林网站模板</span>
    </a>
</li>
              <li>
    <a href="/6827.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/2007839318.png" width="200">
        <span style="width: 240px;">家居家具沙发类网站模板</span>
    </a>
</li>
              <li>
    <a href="/6823.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/3745448012.png" width="200">
        <span style="width: 240px;">商务培训教育网站模板</span>
    </a>
</li>
             <li>
    <a href="/6776.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/3113977507.png" width="200">
        <span style="width: 240px;">奢华珠宝首饰网站模板</span>
    </a>
</li>
              <li>
    <a href="/6784.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/932266352.png" width="200">
        <span style="width: 240px;">健身塑型企业网站模板</span>
    </a>
</li>
              <li>
    <a href="/6768.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/3441308529.png" width="200">
        <span style="width: 240px;">国际物流货运公司网站模板</span>
    </a>
</li>
             <li>
    <a href="/6789.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/1496673771.png" width="200">
        <span style="width: 240px;">美食糕点企业网站模板</span>
    </a>
</li>
              <li>
    <a href="/6740.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/698435912.png" width="200">
        <span style="width: 240px;">金融产品展示公司网站模板</span>
    </a>
</li>
             <li>
    <a href="/6676.html">
        <img src="https://upyun-img.rlxx.vip/2024/03/3454009883.png" width="200">
        <span style="width: 240px;">幼儿早教机构网站模板</span>
    </a>
</li>
    </ul>
 </div>
<style>
 .one {
 margin: 10px auto;
 height: 200px;
 overflow: hidden;
 position: relative;
 width: 100%;
}

.one ul {
 height: 200px;
 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] != 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()})    
               }  

 }      
})   
</script>

PS：代码中引用的图片，自行保存替

本文来自投稿，不代表本站立场，如若转载，请注明出处：
-- 展开阅读全文 --
牛角自动采集在线电脑壁纸php源码
« 上一篇 03-13
强大的头像制作神器微信小程序源码/支持外卖CPS等优惠劵小程序源码
下一篇 » 03-13

随机推荐

问道手游之凌云府_经典回合超变特色手游_win服务端源码

等了10年，工信部的APP备案终于来了

码支付 PC端 三合一 挂机使用教程

小狐狸ChatGPT系统1.7.0全开源独立版 + H5 +admin+super+web+小程序VUE包

发表评论

发表评论
    请配置好页面缩略名选项

每月热门

标签TAG

更多标签

每月热评