如何在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