如何在javascript滑塊中淡入淡出？

Question

我使用javascript代碼創建了一個滑塊，我想在其中添加一些動畫效果，如淡入淡出。

這是我的代碼：

 <script type="text/javascript">
        <!--
        var image1=new Image()
        image1.src="1.jpg"

        var image2=new Image()
        image2.src="2.jpg"

        var image3=new Image()
        image3.src="3.jpg"

        var image4=new Image()
        image4.src="4.jpg"
        //-->
    </script>

<script>
    <!--
    var step=1
    function slideit()
    {
        document.images.slide.src=eval("image"+step+".src")
        if(step<4)
        step++
        else
        step=1
        setTimeout("slideit() ",3500)
    }
    slideit()
    //-->
    </script>

是否有任何淡入淡出或其他動作的代碼？

任何幫助，將不勝感激。

提前致謝。

Answer 1

是的，有完整的jquery插件只為這些類型的東西開發。 easySlider是其中之一，flexSlider是另一個。 Bootstrap有一個滑塊，它們稱為carousel，雖然只有滑動效果，但添加交叉漸變相當容易。

Answer 2

看一下代碼，很少有東西必須絕對改變：

• 許多類似的元素必須放在一個數組中，而不是放在許多類似命名的變量中。

• 事實上，不要使用eval ，因為它不會回來。 eval是一個被濫用來補償缺乏能力的關鍵詞。

然后，對於淡入淡出和動作，您可以查看這些滑塊並根據需要使用jQuery自定義其中一個。 理想情況下，您不必自己處理圖像元素，因為它是滑塊的工作。

Answer 3

給幻燈片容器一個id“圖像”，然后你可以創建img dom元素並將其附加到容器，然后每3.5秒更改一次源，並使用jquery為不透明度設置動畫（fadeIn）。

$(document).ready(function () {
    var src = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
    var slide = 0;
    var img = new Image();
    document.getElementById('images').appendChild(img);

    function slideit() {
        img.style.opacity = 0;
        img.src = src[slide % 4]; //%4 will reset the counter to 0 after 3.
        img.onload = function () {
            $('#images img').animate({
                'opacity': 1
            }, 500);
            slide++;
        };
        setTimeout(slideit, 3500);
    }
    slideit();
});

的jsfiddle