html图⽚渐隐渐显,jquery图⽚滚动（渐隐渐现模糊消失效果）距离上次写图⽚滚动代码已经过去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");
});
jquery在线图片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);
useover(function(){
window.clearInterval(settime);
});
useout(function(){
settime=window.setInterval(auto,5000);
});
其中需要注意的是css代码⾥⾯的图⽚需要设定position:absolute；或者position:relative；才会有效果。之前我也是犯着这个错误⼀直不见效果。本例中是⽤jquery的fade来实现的，当然你也可以使⽤css的opacity、animate等来实现。不过这种⽅式好像是兼容性⽐较好的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。