给网站添加一个的滚动的图片广告展示HTML源码-QQ沐编程

代码介绍

给网站添加一个的滚动的图片广告展示，复制代码到相应位置即可，可以作为广告展示，也可作为指定分类，重点内容等，可以适合各个场景

源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改

双击html文件可以本地运行效果，也可以上传到服务器里面

更多好看的html源码可以搜索QQ沐编程，觉得有帮助的话可以CTRL+D收藏一下本站

效果展示

图片[1]-给网站添加一个的滚动的图片广告展示HTML源码-QQ沐编程

完整源码

<div class="one">
    <ul style="left: -788px;">
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 0px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 0px;">APP封装 签名 分发</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <span style="width: 240px;">承接各类推广广告</span></a>
        </li>
        <li><a href="/"><img src="https://ucc.alicdn.com/pic/developer-ecology/oih3hk5qdafc6_97108f4754184891b95fd250252b4f76.png" >
            <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] != 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>

本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！

THE END