js实现无缝滚动效果

最新推荐文章于 2020-01-29 19:12:41 发布

尜尜alp

最新推荐文章于 2020-01-29 19:12:41 发布

阅读量985

点赞数

分类专栏：原生js 文章标签：前端开发图片无缝滚动无缝滚动焦点图

本文链接：https://blog.csdn.net/gaga06/article/details/8363983

版权

原生js 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

找了很多无缝滚动的效果，主要用到的函数就是scrollLeft(左边滚动)，自己就重新以自己的想法写了一次了，兼容所有主流浏览器。

<!DOCTYPE HTML>

<html lang="en-CN">
<head>
<meta charset="utf-8" />
<title>无缝滚动图片</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none}
.mc{margin:30px auto;}
#gaga{height:92px;width:782px;overflow:hidden;}
.gaga_ul,.gaga_ul1{float:left;}
.gaga_ul li,.gaga_ul1 li{border:1px solid #ccc;margin-right:10px;float:left;width:120px;height:90px;}
#ga_div{height:92px;}
</style>
</head>
<body>
<div id="gaga" class="mc">
   <div id="ga_div">
       <ul id="ga_ul" class="gaga_ul">
           <li><img src="http://pic25.nipic.com/20121202/11511914_223846711115_2.jpg" width="120" height="90" /></li>
           <li><img src="http://pic25.nipic.com/20121202/11511914_223940359116_2.jpg" width="120" height="90" /></li>
           <li><img src="http://pic18.nipic.com/20120202/6099674_142242467105_2.jpg" width="120" height="90" /></li>
           <li><img src="http://pic25.nipic.com/20121202/11511914_224150380124_2.jpg" width="120" height="90" /></li>
           <li><img src="http://pic18.nipic.com/20120202/6099674_142242467105_2.jpg" width="120" height="90" /></li>
           <li><img src="http://pic25.nipic.com/20121202/11511914_223940359116_2.jpg" width="120" height="90" /></li>
       </ul>
       <ul class="gaga_ul1" id="ga_ul1"></ul>
       <div class="cl"></div>
   </div>
</div>
<script>
   var Time = 20;      // 数值越大动画就慢反之越快
   var ga_ul = document.getElementById("ga_ul");        // 第一组个图片
   var ga_ul1 = document.getElementById("ga_ul1");    // 复制出来的图片
   var gaga = document.getElementById("gaga");         // 最外层的div
   var ul_w = ga_ul.scrollWidth;         // 获取一组图片的宽度
   var len = ga_ul.getElementsByTagName("li").length;          // 获取li的长度
   document.getElementById("ga_div").style.width = (ul_w*2 + 20) + "px";     // 设置ga_div的宽度

   if( len >= 6 ){           // 如果当图片的数量少于6张的时候就不执行动画
       ga_ul1.innerHTML = ga_ul.innerHTML;      // 复制一组图片
       function sui(){
           if(gaga.scrollLeft > ul_w){ // 滚动超出第一组图片的的时候
               gaga.scrollLeft = 0;
           }else{
               gaga.scrollLeft++;
           }
       }
       var fun = setInterval(sui,Time); // 自动播放
       gaga.onmouseover = function(){    // 鼠标放上去图片的时候停止动画
           clearInterval(fun);
       }
       gaga.onmouseout = function(){            // 鼠标移开图片的时候继续动画
           fun = setInterval(sui,Time);
       }
   }
</script>
</body>
</html>

尜尜alp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现无缝滚动效果

找了很多无缝滚动的效果，主要用到的函数就是scrollLeft(左边滚动)，自己就重新以自己的想法写了一次了，兼容所有主流浏览器。无缝滚动图片*{margin:0;padding:0;}ul,li{list-style:none}.mc{margin:30px auto;}#gaga{height:92px;width:782px;overflow:hi
复制链接

扫一扫

专栏目录