Question

我有问题这是我在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>

Answer 1

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

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

1 个答案: