jquery实现简单定时轮播图

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要设置好，不然两张照片位置不一！