JS
$(document).ready(function(){
var index = 0; //刚开始设置一个index,index为图片的索引值
$(".pictureDemo img").hide();
$(".pictureDemo img").eq(index).show(); //当图片索引为0时,显示对应的图片,其他的隐藏
//设置一个定时器
timer = setInterval(function(){
var imgObj = $(".pictureDemo img");
//通过index的值进行循环
index++;
if(index>1){
index = 0;
}
imgObj.fadeOut(1000);
imgObj.eq(index).fadeIn(1000);
},2000)
})
html
<div class = "pictureDemo">
<img src = "img/tbdemo.jpg">
<img src = "img/tbdemo2.jpg">
</div>
css
.pictureDemo{
height:300px;
width:90%;
margin:90px auto 0;
position:relative;
}
.pictureDemo img{
height:100%;
width:100%;
position:absolute;
}
注:css里面position要设置好,不然两张照片位置不一!