jquery图片滚动（渐隐渐现模糊消失效果）

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

内容为“”。

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

代码如下

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等来实现。不过这种方式好像是兼容性比较好的。

您可能感兴趣的文章：
jquery图片滚动（渐隐渐现模糊消失效果）
js+JQuery返回顶部功能如何实现
基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）
jQuery幻灯片放映插件 CrossSlide
jquery 提示信息显示后自动消失的具体实现
photoshop利用渐变工具制作立体石膏球教程
jquery实现marquee效果(文字或者图片的水平垂直滚动)
jquery div提示框渐隐弹出与隐藏效果
photoshop中制作树林中的透射光线两种教程
网页中返回顶部代码(多种方法)另附注释说明