0

我正在尝试创建一个 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>
4

2 回答 2

1

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

$(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>
于 2013-07-29T05:55:17.927 回答
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/

于 2013-07-27T18:45:20.617 回答