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

查看代码，有一些事情必须绝对改变：

许多类似的元素必须放在array而不是许多类似命名的变量中。
不要使用eval，事实上，要杀死它，这样它就不会回来了。 eval是一个被滥用以补偿缺乏能力的关键字。

然后，对于淡入淡出和动作，您可以查看这些sliders并根据需要使用jQuery自定义其中一个。理想情况下，您不必自己处理图像元素，因为它是滑块的工作。

Answer 3

给幻灯片容器一个id。 “images”，然后您可以创建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

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

3 个答案: