Javascript幻灯片（添加幻灯片效果）答案

【问题标题】：Java Script Slide Show (add slide effect)Javascript幻灯片（添加幻灯片效果）
【发布时间】：2014-08-28 10:40:56
【问题描述】：

我有问题这是我在 javascript 中的第一步，我正在尝试制作 Javascript 幻灯片。我尝试添加“滑入”“滑出”效果但我不知道我该怎么做。我用谷歌搜索了大约 2-3 个小时，但仍然没有解决方案。请帮助我并给我一些反馈

这是我的代码

<head>
    <title>Test Slider</title>
</head>

<body>
    <div id="slider" style="width: 400px; height: 200px;color: orange; font-weight: bold; font-size: 30px;font-family: sans-serif" onclick="javascript:superlink()" style="cursor:pointer;"></div>
    <script type="text/javascript">
        //Init//
        var SlideDauer = 2000;
        var ImgInX = 0;
        var ImgInXposition = 0;
        var background = 'url(http://www.flashforum.de/forum/customavatars/avatar47196_1.gif)';
        var SldInX = 0;
        var LinkInX = 0;

        function superlink() {
            if (!SliderKannEsLosGehen()) return false;
            if (LinkInX >= SliderBilder.length) {
                LinkInX = 0;
            }
            var Ziel = window.location.href = SliderLink[LinkInX];
            ++LinkInX;
        }

        var SliderBilder = new Array();
        SliderBilder.push("http://ds.serving-sys.com/BurstingRes//Site-80313/Type-0/721dbabb-2dd5-4d92-9754-7db9c5888f48.jpg");
        SliderBilder.push("http://bytes.com/images/bytes_logo_a4k80.gif");
        SliderBilder.push("http://cdn.qservz.com/file/df8e9dcf202cfddedf6f2d4d77fcf07b.gif");
        SliderBilder.push("http://ds.serving-sys.com/BurstingRes//Site-80313/Type-0/721dbabb-2dd5-4d92-9754-7db9c5888f48.jpg");
         //SliderBilder.push("http://www.flashforum.de/forum/customavatars/avatar47196_1.gif");

        var SliderTitle = new Array();
        SliderTitle.push("");
        SliderTitle.push("Title 1");
        SliderTitle.push("Title 3");
        SliderTitle.push("Title 4");
         //SliderTitle.push("Title 5");

        var SliderLink = new Array();
        SliderLink.push("http://www.google.de");
        SliderLink.push("http://spiegel.de");
        SliderLink.push("http://bing.com");
        SliderLink.push("http://youtube.com");
         //SliderLink.push ("http://www.flashforum.de/forum/customavatars/avatar47196_1.gif");

        function SliderKannEsLosGehen() {
            if (SliderBilder.length < 2) return false;
            return true;
            if (SliderTitle.length < 2) return false;
            return true;
        }

         //Run//
        function SliderRun() {

            if (!SliderKannEsLosGehen()) return false;
            if (ImgInX >= SliderBilder.length) {
                ImgInX = ImgInXposition;
            }
            if (SldInX >= SliderBilder.length) {
                SldInX = 0;
            }
            document.getElementById("slider").style.backgroundImage = 'url(' + SliderBilder[ImgInX] + ')';
            ++ImgInX;
            document.getElementById("slider").innerHTML = SliderTitle[SldInX];
            ++SldInX;
            window.setTimeout("SliderRun()", SlideDauer);
        }
        window.setTimeout("SliderRun()", SlideDauer);
    </script>
</body>

</html>

【问题讨论】：

标签： javascript slider slideshow

【解决方案1】：

对于效果，我会研究 JQuery 并使用 animate 函数。只要您了解 css，就会有很多乐趣。

【讨论】：

感谢您的回答，我查看了 jquery 并了解 css