利用jQuery的淡入淡出实现轮播器

基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果；

但我在使用fadeIn淡入时却无效果，最后只能使用fadeTo实现，求大神指教

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个轮播</title>
<style>
    #scrollPlay{
        width: 730px;
        height: 336px;
        /*overflow: hidden;*/
    }
    #pre{
        position: absolute;
        margin-top: 150px;
        width:30px;
        height: 30px;
        background: #000;
        color:#fff;
        opacity: 0.7;
        text-align: center;
        line-height: 30px;
        font-size: 20px;
        z-index: 10;
    }
    img{
        opacity: 0;
        position: absolute;
    }
    #next{
        position: absolute;
        margin-left:700px;
        margin-top: 150px;
        width:30px;
        height: 30px;
        background: #000;
        color:#fff;
        opacity: 0.7;
        text-align: center;
        line-height: 30px;
        font-size: 20px;
        z-index: 10;
    }
    span{
        display: block;
        width: 15px;
        height: 15px;
        float: left;
        border: 1px solid #fff;


    }
    #buttons{

        position: absolute;
        background: #000;
        margin-top: 300px;
        margin-left: 300px;
        z-index: 10;

    }

    .onactive{
        background: green;
    }
</style>
<script src='jquery.js'></script>
<script src='index.js'></script>
</head>
<body>
    <div id='scrollPlay'>
        <div id='buttons'>
            <span index = 0 class='onactive'></span>
            <span index = 1></span>
            <span index = 2></span>
            <span index = 3></span>
            <span index = 4></span>

        </div>
        <div id='pre'>&lt</div>
        <div id='next'>&gt</div>
        <img src='images/1.jpg' alt='pics' style='opacity:1'>
        <img src='images/2.jpg' alt='pics'>
        <img src='images/3.jpg' alt='pics'>
        <img src='images/4.jpg' alt='pics'>
        <img src='images/5.jpg' alt='pics'>
    </div>
</body>
    
</html>

View Code

JS：

$(function(){

    var index = 0;
    var flag = false; //用于判断是否处于动画状态
    //切换函数
    function move(offset){    
        flag=true;
        //console.log(offset)
        $('img').eq(index).fadeOut('slow',function(){
            if(offset>0){
                if(index ==4){
                    index=0;    
                }else{
                    //console.log(index);
                    index=index+offset;
                    //console.log(index);
                }
            }
            if(offset<0){
                if(index==0){
                index=4;
                }else{
                index=index+offset
                }
            }
            $('img').eq(index).fadeTo('slow',1)   //使用fadeIn不成功:$('img').eq(index).fadeIn('slow')
            showButton();
            flag=false;
        });    
    }


    //点击切换上一张
    $('#pre').click(function(){
        if(flag==false){
            move(-1)
        }
        
    })

    //点击切换下一张
    $('#next').click(function(){
        if(flag==false){
            move(1)
        }
    })

    //点击按钮直接切换
    $('span').click(function(){
        if(flag==false){
            var i= $(this).attr('index')
            //console.log(i)
            //console.log(index)
            //console.log(i-index)
            move(i-index)    
            showButton();
        }
        
    })
    
    //高亮显示按钮
    function showButton(){
        if($('span').hasClass('onactive')){
            $('span').removeClass();
        }
        $('span').eq(index).addClass('onactive')
    }


    //自动播放
    var timer;

    function go(){
        timer = setInterval(function(){
            $('#next').trigger('click');
        },3000)
    }
    //鼠标悬停，清除自动播放
    $('#scrollPlay').mouseover(function(){
            clearInterval(timer)
    })

    //鼠标移开，开始自动播放
    $('#scrollPlay').mouseout(function(){
            go();
    })

    go();    
})