0

我使用 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>

是否有淡入淡出或其他动作的代码？

任何帮助，将不胜感激。

提前致谢。

4

3 回答 3

1

是的，有为这些类型的东西开发的完整的 jquery 插件。easySlider 是一个，flexSlider 是另一个。Bootstrap 有一个他们称之为轮播的滑块，虽然只有滑动效果，但添加交叉淡入淡出相当容易。

于 2013-06-05T21:53:21.667 回答
1

查看代码，有几件事必须绝对改变：

  • 许多相似的元素必须放入一个数组而不是许多类似名称的变量中。

  • 不要使用eval，事实上，用火杀死它，这样它就不会回来了。eval是一个被滥用来弥补能力不足的关键字。

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

于 2013-06-05T22:05:21.850 回答
0

给幻灯片容器一个 id ig“图像”，然后您可以创建imgdom 元素并将其附加到容器中，然后每 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

于 2013-06-05T22:39:20.290 回答