Question

我正在尝试创建一个jQuery应用程序，以便在加载网页时显示一组图像的幻灯片。我尝试使用jQuery函数，如`slideDown（），Hide（），Show（），scrollTop（），scrollLeft（）。我无法延迟他们的显示。图像在瞬间滚动或滑动。因此，我在下面发布我的代码。请帮帮我...

<head runat="server">
  <title></title>
  <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
  <script type="text/javascript" language="javascript">
    function Images() {
      for (var i = 0; i < 1000; i++)
        $("#div4").fadeOut(1000);
      for (var i = 0; i < 1000; i++)
        $("#div3").fadeIn(1000);
      for (var i = 0; i < 1000; i++)
        $("#div2").fadeOut(1000);
      for (var i = 0; i < 1000; i++)
        $("#div1").fadeIn(1000);
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div id="div1" onclick="Images()" style="background-image: url('images/Chrysanthemum.jpg');
      height: 500px; width: 500px">
      <div id="div2" onclick="Images()" style="background-image: url('images/Lighthouse.jpg');
        height: 500px; width: 500px">
        <div id="div3" onclick="Images()" style="background-image: url('images/Desert.jpg');
          height: 500px; width: 500px">
          <div id="div4" onclick="Images()" style="background-image: url('images/Koala.jpg');
              height: 500px; width: 500px">
          </div>
        </div>
      </div>
    </div>
  </form>
</body>

Answer 1

您可以在img中添加一组<div/>代码：

<div id="container">
    <img alt="test" class="slide" width="320" height="240" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-ash4/p480x480/1012341_10151567603438440_1504447620_n.jpg" />
    <img alt="test" class="slide" width="320" height="240" src="http://heathermalyn.files.wordpress.com/2012/09/nature-beauty-art.jpg?w=644" />
    <img alt="test" class="slide" width="320" height="240" src="http://nicefun.net/userpix10/11427_Beauty_Of_Nature_Around_Us_NiceFun_372_1.jpg" />
    <img alt="test" class="slide" width="320" height="240" src="http://www.wunderground.com/data/wximagenew/t/twinietwo06/957.jpg" />
    <img alt="test" class="slide" width="320" height="240" src="http://economictimes.indiatimes.com/thumb/msid-20749535,width-640,resizemode-4/images-of-years-largest-full-moon-from-around-the-world.jpg" />
</div>

JS代码如下所示：

$.fn.extend({
    //custom event - creates a slideshow using a recursive setTimeout()
    //delay - the time delay
    "slideShow": function (delay) {
        //find images
        var img = this.find("img"),
            //get the length
            i = img.length;
        //hide all first time
        img.hide();
        //start the loop
        (function loop() {
            setTimeout(function () {
                img.hide();
                $(img[i]).fadeToggle("slow");
                if (i > 0) {
                    i--;
                } else {
                    i = img.length;
                }
                console.log(i);
                loop();
            }, delay);
        })();
    }
});

所以你可以在div：

上这样称呼它

$(function () {
    $("#container").slideShow(1000);
});

演示：http://jsfiddle.net/hungerpain/R8UzD/

Answer 2

我得到了另一个简短的解决方案，并提供相同的输出。

$(function () { 
          showimage(1); 
        }); 
        function showimage(no) { 
            $("#div1 img").hide(); 
            $("#img"+no).fadeIn(2000, function () { no = (no % 5) + 1; showimage(no); }); 
        }

<div id="div1" class="slideshow" style="width: 500px; height: 500px;">
        <img id="img1" src="images/Chrysanthemum.jpg" alt="test" />
        <img id="img2" src="images/Tulips.jpg" alt="test" />
        <img id="img3" src="images/Jellyfish.jpg" alt="test" />
        <img id="img4" src="images/Penguins.jpg" alt="test" />
        <img id="img5" src="images/Hydrangeas.jpg" alt="test" />
</div>

如何创建一个jQuery应用程序，以便在加载页面后立即显示一组图像的幻灯片

2 个答案: