您的位置：首页 > Web前端 > JavaScript

js实现无缝滚动效果

2012-12-21 14:55 671 查看

找了很多无缝滚动的效果，主要用到的函数就是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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端开发图片无缝滚动无缝滚动焦点图

相关文章推荐

新的分享

章节导航