距离上次写图片滚动代码已经过去4个月了。最近的一次修改时在2013年5月15日更新。

内容为“原创jQuery图片上下左右滚动代码”。

里面已经集成了上下、左右、隐藏与消失的代码。可以说大部分的图片滚动万变不离其宗了。下面将写出另外一种方式，就是本文提到的“渐隐渐现的效果”，这个也是图片滚动比较常见的方式之一。

查看演示
JS代码如下

var bn=$("#banner");var bn_pic=$(".bn_box li",bn);var len = bn_pic.length;var bn_tab=$(".bn_tab li",bn);var prev = $(".prev",bn);var next = $(".next",bn);function tab(i,j){bn_pic.eq(j).fadeOut(1000);bn_tab.eq(j).attr("class","");bn_pic.eq(i).fadeIn(1000);bn_tab.eq(i).attr("class","current");}bn_tab.click(function(){var i=bn_tab.index(this);var j=bn_tab.index($('#banner .current:eq(0)'));if(i!=j){tab(i,j);}});function auto(){var j=bn_tab.index($('#banner .current:eq(0)'));var i=(j+1)%len;tab(i,j);}prev.click(function(){var j=bn_tab.index($('#banner .current:eq(0)'));var i=(j-1)%len;tab(i,j);//alert("dd");});next.click(function(){var j=bn_tab.index($('#banner .current:eq(0)'));var i=(j+1)%len;tab(i,j);});//定时切换var settime=window.setInterval(auto,5000);bn_pic.mouseover(function(){window.clearInterval(settime);});bn_pic.mouseout(function(){settime=window.setInterval(auto,5000);});

其中需要注意的是css代码里面的图片需要设定position:absolute;或者position:relative;才会有效果。之前我也是犯着这个错误一直不见效果。本例中是用jquery的fade来实现的，当然你也可以使用css的opacity、animate等来实现。不过这种方式好像是兼容性比较好的。

查看演示