夏日博客

A-A+

js图片循环滚动效果2种例子

2016年01月11日 前端设计 暂无评论 阅读 5 views 次

循环滚动效果对于各位朋友来许在许多的网站用到的非常的多了，我们下文来为各位介绍一篇关于js图片循环滚动效果的例子，希望对各位有帮助。

在网页中，会经常用到图片滚动的效果。

js图片循环滚动效果2种例子

那么是怎样实现的呢？

方法一:imgscroll.js。顾名思义，它是一款图片滚动插件。源码如下：

  1. $.fn.imgscroll = function(o){  
  2.     var defaults = {  
  3.         speed: 40,  
  4.         amount: 0,  
  5.         width: 1,  
  6.         dir: "left"  
  7.     };  
  8.     o = $.extend(defaults, o);  
  9.        
  10.     return this.each(function(){  
  11.         var _li = $("li", this);  
  12.         _li.parent().parent().css({overflow: "hidden", position: "relative"}); //div  
  13.         _li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul  
  14.         _li.css({position: "relative", overflow: "hidden"}); //li  
  15.         if(o.dir == "left") _li.css({float: "left"});  
  16.            
  17.         //初始大小  
  18.         var _li_size = 0;  
  19.         for(var i=0; i<_li.size(); i++)  
  20.             _li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);  
  21.            
  22.         //循环所需要的元素  
  23.         if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});  
  24.         _li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());  
  25.         _li = $("li", this);  
  26.     
  27.         //滚动  
  28.         var _li_scroll = 0;  
  29.         function goto(){  
  30.             _li_scroll += o.width;  
  31.             if(_li_scroll > _li_size)  
  32.             {  
  33.                 _li_scroll = 0;  
  34.                 _li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });  
  35.                 _li_scroll += o.width;  
  36.             }  
  37.                 _li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);  
  38.         }  
  39.            
  40.         //开始  
  41.         var move = setInterval(function(){ goto(); }, o.speed);  
  42.         _li.parent().hover(function(){  
  43.             clearInterval(move);  
  44.         },function(){  
  45.             clearInterval(move);  
  46.             move = setInterval(function(){ goto(); }, o.speed);  
  47.         });  
  48.     });  
  49. };  

引用的方法如下:

  1. $(".scroll").imgscroll({  
  2.     speed: 40,    //图片滚动速度  
  3.     amount: 0,    //图片滚动过渡时间  
  4.     width: 1,     //图片滚动步数  
  5.     dir: "left"   // "left" 或 "up" 向左或向上滚动  
  6. });  

其中，”.scroll”是滚动的对象。

这种方法的确实现了效果，但是存在一些问题。在页面第一次刷新时会出现错乱。

于是找了第二种方法。

方法二:源生js代码

  1. <div id="demo">  
  2.     <div id="indemo">  
  3.         <div id="demo1">  
  4.             <ul>  
  5.                           <li>  
  6.                               <a href="#"><img  src="images/focus.png" height="174" /></a>  
  7.                               <span><a href="#">作品</a></span>  
  8.                           </li>  
  9.                           <li>  
  10.                               <a href="#"><img  src="images/gl1.png" height="174" /></a>  
  11.                               <span><a href="#">作品</a></span>  
  12.                           </li>  
  13.                           <li>  
  14.                               <a href="#"><img  src="images/gl2.png" height="174" /></a>  
  15.                               <span><a href="#">作品</a></span>  
  16.                           </li>  
  17.                           <li>  
  18.                               <a href="#"><img  src="images/gl1.png" height="174" /></a>  
  19.                               <span><a href="#">作品</a></span>  
  20.                           </li>  
  21.        
  22.             </ul>  
  23.         </div>  
  24.         <div id="demo2"></div>  
  25.     </div>  
  26. </div>  
  27. //js代码：  
  28. var speed=20; //数字越大速度越慢  
  29. var tab=document.getElementById("demo");  
  30. var tab1=document.getElementById("demo1");  
  31. var tab2=document.getElementById("demo2");//获取对象  
  32. tab2.innerHTML=tab1.innerHTML;//将tab1的内容给tab2  
  33.    
  34. function Marquee(){  
  35.     if(tab2.offsetWidth-tab.scrollLeft<=0)  
  36.     tab.scrollLeft-=tab1.offsetWidth  
  37.     else{  
  38.     tab.scrollLeft++;  
  39.     }  
  40. }  
  41. var MyMar=setInterval(Marquee,speed);  
  42. tab.onmouseover=function() {clearInterval(MyMar)};  
  43. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};  

试过了方法二，在所有浏览器上都能实现，唯独在IE6下却没有作用。出现的效果是仅仅下方的文字滚动，而图片不滚。

于是慢慢找原因。

一开始以为是高度的问题，后来确定不是。

后来把图片换成jpg格式的，就可以了。想了一下是不是因为格式的问题，可是这种问题应该不会造成兼容性问题。

于是想到png与jpg的区别，突然就找到了问题出现的原因。

在IE6下为了解决png图片不透明的问题，我们使用了DD_belatedPNG.js。代码如下：

  1. <script src="js/DD_belatedPNG.js"></script>  
  2. <!--[if IE 6]>  
  3. <script type="text/javascript">  
  4. DD_belatedPNG.fix('div,img');  
  5. </script>  
  6. <![endif]-->  

结果就是因为给img透明，才造成了图片不滚文字滚的问题。所以应该在我们需要透明的图片上加样式。就像这样：

  1. <script src="js/DD_belatedPNG.js"></script>  
  2. <!--[if IE 6]>  
  3. <script type="text/javascript">  
  4. DD_belatedPNG.fix('.needpng');  
  5. </script>  
  6. <![endif]-->  
标签：

给我留言