要实现动画效果需要使用jquery的animate函数与css的opacity属性,opacity在IE下不识别,但是我测试的时候还是可以运行的不知道是不是jquery做好了兼容
首先看html跟css样式:
#tab{position:relative;left:0;}
#tab div{position:absolute;left:0;}
<div id="tab">
<div><img src="images/1.jpg" /></div>
<div><img src="images/2.jpg" /></div>
<div><img src="images/3.jpg" /></div>
<div><img src="images/4.jpg" /></div>
</div>
下面看js代码:
$(function(){
var index=0;
$("#tab>div:gt(0)").css({opacity:0});
var oLi=$("#tab>div").length;
function show(num){
//alert(num);
$("#tab>div").eq(num).animate({opacity:0},1500).next().animate({opacity:1},1500);
if(num==oLi ){
$("#tab>div").eq(0).animate({opacity:1},1500);
}
}
function zidong(){
if(index>oLi){
index=0;
}else if(index<0){
index==oLi;
}
show(index);
index=index+1;
}
int=setInterval(zidong,3000);
})
好了,这样就可以实现渐隐动画的效果,不过缺少切换的按钮动画的效果原理,这个可以自行添加;
同时也可以使用jquery的fadeIn、fadeOut函数实现渐隐动画效果,但是本人看着这个动画效果有点生硬,还是觉得用opacity比较好一点,或者使用fadeto、fadeToggle也不错的