0

因此，我尝试使用淡入/淡出过渡和加载了 ajax 的图像来构建一个 CSS 滑块。问题是当 ajax 图像出现并且 fade 的 css 过渡效果应该起作用时，它不起作用。但是在第一次加载图像后过渡效果很好（因为我正在检查图像是否存在）。

这是一个小提琴作为例子

这是代码：

<style>
    body{ margin:0px; }
    #wrapper{
        position:relative;
        width:1024px;
        height:768px;
    }
    #wrapper img{
        position:absolute;
        width:;
        top:0px;
        left:0px;
        opacity: 0;
        -webkit-transition: all 0.5s;
         -moz-transition: all 0.5s;
           -o-transition: all 0.5s;
              transition: all 0.5s;
    }
</style>

<div id="wrapper">
    <img class="selected" src="img/photo01.jpg" />
</div>
<script>
    var images = [
            {image:'img/photo01.jpg', loaded:true},
            {image:'img/photo02.jpg', loaded:false},
            {image:'img/photo03.jpg', loaded:false},
            {image:'img/photo04.jpg', loaded:false},
            {image:'img/photo05.jpg', loaded:false}
        ],
        arrIndex = 0,
        zIndex = 1,
        timer = 1500,
        fadeInTime = 500,
        timerID,
        isLoading = false,
        container,
        imgPrefix = 'slideImage_',
        curSelected = $('#'+imgPrefix+arrIndex);

    $(document).ready(function(){
        container = $('#wrapper');
        timerID = setTimeout(nextImage,timer);
        $('img',container).attr('id',imgPrefix + arrIndex);
    });

    function nextImage(){
        if(!isLoading){
            arrIndex++;
            arrIndex = arrIndex >= images.length ? 0 : arrIndex;
            loadImage();
        }
    }

    function prevImage(){
        if(!isLoading){
            arrIndex--;
            arrIndex = arrIndex < 0 ? images.length-1 : arrIndex;
            loadImage();
        }
    }

    function loadImage(){
        var imgObj = images[arrIndex];

        isLoading = true;
        zIndex++;
        $('img:visible').css('opacity',0);

        if(imgObj.loaded){
            // $('#'+imgPrefix + arrIndex).hide().css('z-index',zIndex).fadeIn(fadeInTime);
            $('#'+imgPrefix + arrIndex).css({'opacity': 1})
            setTimer();
        } else {
            $('<img />')
            .load(function(){
                // $(this).hide();
                container.append(this);
                //$(this).fadeIn(fadeInTime);
                imgObj.loaded = true;
                setTimer();
            })
            .attr('id', imgPrefix + arrIndex)
            .attr('src',imgObj.image)
            .css({'opacity': 1});;
        }
    }

    function setTimer(){
        isLoading = false;
        timerID = setTimeout(nextImage,timer);
    }

</script>

希望你能理解

4

0 回答 0