Question

我想制作一个与本页顶部的{* 3}}相同的幻灯片。我想要的只是使用Javascript，没有CSS，没有jQuery。我已经尝试了，但我不能这样做，我想要一些帮助，当然不是完整的代码，只是一个有用的建议。谢谢。

这是我的错误代码......

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            #container {
                position: relative;
                width: 1000px;
                height: 420px;
                overflow: hidden;
            }
            img {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 1000px;
                height: 420px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <img src="our-partners.jpg">
            <img src="index.jpg">
            <img src="our-taxis.jpg">
            <img src="pre-book.jpg">
            <img src="join-us.jpg">
            <img src="news.jpg">
            <img src="contact.jpg">
        </div>
        <script>
            var container = document.getElementById("container");
            var imgElems = container.querySelectorAll("img");
            var timer = setInterval(f1, 200);
            var n = 0;
            var i = 0;
            function f1() {
                var elem = imgElems[i];
                elem.style.left = n + "px";
                n--;
                i++;
                if (n === (-1000)) {
                    n = 0;
                }
            }
        </script>
    </body>
</html>

Answer 1

试试这段代码，可能会有所帮助。 http://www.szcchina.com/blog/photo-slideshow-code.html http://www.jsmadeeasy.com/javascripts/images/list_test.asp

如果您尝试使用jquery以获得更好的结果，请尝试以下代码：

<script type="text/javascript">
    $("#slideshow > div:gt(0)").hide();
    setInterval(function() { 
    $('#slideshow > div:first')
        .fadeOut(2000)
        .next()
        .fadeIn(2000)
        .end()
        .appendTo('#slideshow');
    },  3000);
</script>


<div id="slideshow">
<div>
<img src="samsung.jpg" style="width: 490px; height: 250px; border-style:ridge;"/>
</div>
<div>
<img src="intel.jpg" style="width: 490px; height: 250px; border-style:ridge;"/>
</div>
<div>
<img src="snap camera.jpg" style="width: 490px; height: 250px; border-style:ridge;"/>
</div>
<div>
<img src="asus.jpg" style="width: 490px; height: 250px; border-style:ridge;"/>
</div>
<div>
<img src="cam.jpg" style="width: 490px; height: 250px; border-style:ridge;"/>
</div>
</div>

Javascript照片幻灯片

1 个答案: