Question

我设法编写js以使图像每隔几秒钟更换一次（10张图像，每次更改都不重复）。但我想让它看起来更好（过渡），也许是通过添加jQuery（fadein fadeout）。但由于我不熟悉jQuery，我不知道如何开始......这是我的代码

<script type = "text/javascript">
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    function shuffle(o) {
        for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };
      var random = shuffle(numbers);

      var images = [], x = -1;
              images[0] = "logaban/image1.png";
              images[1] = "logaban/image2.png";
      images[2] = "logaban/image3.png";
      images[3] = "logaban/image4.png";
      images[4] = "logaban/image5.png";
      images[5] = "logaban/image6.png";
      images[6] = "logaban/image7.png";
      images[7] = "logaban/image8.png";
      images[8] = "logaban/image9.png";
      images[9] = "logaban/image10.png";

      var links = [], x = -1;
      links[0] = "link1";
      links[1] = "link2";
      links[2] = "link3";
      links[3] = "link4";
      links[4] = "link5";
      links[5] = "link6";
      links[6] = "link7";
      links[7] = "link8";
      links[8] = "link9";
      links[9] = "link10";
    function zmiana() {
            shuffle(numbers);
          document.getElementById("img1").src = images[numbers[0]];
          document.getElementById("bannerLink1").href = links[numbers[0]]; 
          document.getElementById("img2").src = images[numbers[1]];
          document.getElementById("bannerLink2").href = links[numbers[1]];
          document.getElementById("img3").src = images[numbers[2]];
          document.getElementById("bannerLink3").href = links[numbers[2]];
          document.getElementById("img4").src = images[numbers[3]];
          document.getElementById("bannerLink4").href = links[numbers[3]];
          document.getElementById("img5").src = images[numbers[4]];
          document.getElementById("bannerLink5").href = links[numbers[4]];
          document.getElementById("img6").src = images[numbers[5]];
          document.getElementById("bannerLink6").href = links[numbers[5]];
          document.getElementById("img7").src = images[numbers[6]];
          document.getElementById("bannerLink7").href = links[numbers[6]];
          document.getElementById("img8").src = images[numbers[7]];
          document.getElementById("bannerLink8").href = links[numbers[7]];
          document.getElementById("img9").src = images[numbers[8]];
          document.getElementById("bannerLink9").href = links[numbers[8]];
          document.getElementById("img10").src = images[numbers[9]];
          document.getElementById("bannerLink10").href = links[numbers[9]];
      }
    function logotypy() {

       setInterval(zmiana, 3000);
       zmiana();
    }
  </script>
 <img src="logaban/image1.png" onload = "logotypy()" style="display: none">

   <a id="bannerLink1" href="">
   <img id="img1" class="image" src="" style="max-width:100%;"></a><br>  
  <a id="bannerLink2" href="">
   <img id="img2" class="image" src="" style="max-width:100%;"></a><br>  
  <a id="bannerLink3" href="">
   <img id="img3" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink4" href="">
   <img id="img4" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink5" href="">
   <img id="img5" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink6" href="">
   <img id="img6" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink7" href="">
   <img id="img7" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink8" href="">
   <img id="img8" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink8" href="">
   <img id="img9" class="image" src="" style="max-width:100%;"></a><br>
   <a id="bannerLink10" href="">
   <img id="img10" class="image" src="" style="max-width:100%;"></a><br>

这是我第一次加入，但我真的不明白我应该如何使用这些jQuery的东西，特别是在这种情况下......

 <script src="jquery-1.9.0.js" type="text/javascript"></script>
  <script>
    $("#image").attr("src").change().fadein();
  </script>

Answer 1

我真的不知道你要用你的所有代码做什么。这是一个简单的jQuery幻灯片，它使用两个图像对象。它会逐渐消失而另一个消失。它假设图像已预先加载，你有一个带有适当CSS的容器div来格式化它（你可以在jsFiddle中看到这些细节）。

function runSlideshow(container, urls, fadeTime, delayTime) {
    // all images are preload now
    // start the slideshow
    var imgs = $(container).append(new Image()).append(new Image()).find("img");
    var curImage = 0;
    var urlIndex = -1;
    // no wait time for the first transition
    var waitTime = 0;

    function next() {
        // set src on the next image
        // fade out the current image
        // fade in the new image
        var nextImage = (curImage + 1) % 2;
        urlIndex = (urlIndex + 1) % urls.length;

        imgs.eq(curImage).delay(waitTime).fadeOut(fadeTime);
        imgs.eq(nextImage).attr("src", urls[urlIndex]).delay(waitTime).fadeIn(fadeTime, next);
        curImage = nextImage;
        // set normal wait time for subsequent images
        waitTime = delayTime;
    }
    next();
}

工作演示：http://jsfiddle.net/jfriend00/ZkqC4/

在这些答案中可以看到预先加载通知的图像：Image preloader javascript that supports events

fadein fadeout图像每隔几秒就会改变一次

1 个答案: