在网页中，会经常用到图片滚动的效果。
如下图：
那么是怎样实现的呢？
方法一：imgscroll.js。顾名思义，它是一款图片滚动插件。源码如下：
$.fn.imgscroll = function(o){
var defaults = {
speed: 40,
amount: 0,
width: 1,
dir: "left"
};
o = $.extend(defaults, o);
return this.each(function(){
var _li = $("li", this);
_li.parent().parent().css({overflow: "hidden", position: "relative"}); //div
_li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul
_li.css({position: "relative", overflow: "hidden"}); //li
if(o.dir == "left") _li.css({float: "left"});
//初始大小
var _li_size = 0;
for(var i=0; i<_li.size(); i++)
_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);
//循环所需要的元素
if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});
_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
_li = $("li", this);
//滚动
var _li_scroll = 0;
function goto(){
_li_scroll += o.width;
if(_li_scroll > _li_size)
{
_li_scroll = 0;
_li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });
_li_scroll += o.width;
}
_li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);
}
//开始
var move = setInterval(function(){ goto(); }, o.speed);
_li.parent().hover(function(){
clearInterval(move);
},function(){
clearInterval(move);
move = setInterval(function(){ goto(); }, o.speed);
});
});
};
引用的方法如下：
$(".scroll").imgscroll({
speed: 40, //图片滚动速度
amount: 0, //图片滚动过渡时间
width: 1, //图片滚动步数
dir: "left" // "left" 或 "up" 向左或向上滚动
});
其中，”.scroll”是滚动的对象。
这种方法的确实现了效果，但是存在一些问题。在页面第一次刷新时会出现错乱。
于是找了第二种方法。
方法二：源生js代码
html:
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
<li>
<a href="#"><img src="images/focus.png" height="174" /></a>
<span><a href="#">作品</a></span>
</li>
<li>
<a href="#"><img src="images/gl1.png" height="174" /></a>
<span><a href="#">作品</a></span>
</li>
<li>
<a href="#"><img src="images/gl2.png" height="174" /></a>
<span><a href="#">作品</a></span>
</li>
<li>
<a href="#"><img src="images/gl1.png" height="174" /></a>
<span><a href="#">作品</a></span>
</li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
js代码：
var speed=20; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");//获取对象
tab2.innerHTML=tab1.innerHTML;//将tab1的内容给tab2
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
试过了方法二，在所有浏览器上都能实现，唯独在IE6下却没有作用。出现的效果是仅仅下方的文字滚动，而图片不滚。
于是慢慢找原因。
一开始以为是高度的问题，后来确定不是。
后来把图片换成jpg格式的，就可以了。想了一下是不是因为格式的问题，可是这种问题应该不会造成兼容性问题。
于是想到png与jpg的区别，突然就找到了问题出现的原因。
在IE6下为了解决png图片不透明的问题，我们使用了DD_belatedPNG.js。代码如下：
<script src="js/DD_belatedPNG.js"></script>
<!--[if IE 6]>
<script type="text/javascript">
DD_belatedPNG.fix('div,img');
</script>
<![endif]-->
结果就是因为给img透明，才造成了图片不滚文字滚的问题。所以应该在我们需要透明的图片上加样式。就像这样：
<script src="js/DD_belatedPNG.js"></script>
<!--[if IE 6]>
<script type="text/javascript">
DD_belatedPNG.fix('.needpng');
</script>
<![endif]-->
以上，就是两种实现图片滚动的方法。对比一下，还是方法二更好一些。有兴趣的同学可以试一试