fadein fadeout изображения, которые меняются каждые несколько секунд

Question

fadein fadeout изображения, которые меняются каждые несколько секунд

0

Мне удалось написать 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>

И вот мой первый attepmt, который я добавил, но я действительно не понимаю, как я должен использовать эти материалы jQuery, особенно в этом контексте...

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

shimon893 03 дек. 2013, в 02:01

Источник

0

Эта строка $("#image").attr("src").change().fadein(); без разницы. .attr("src") возвращает строку, у которой нет метода .change() что приведет к ошибке. Обычно, если вы хотите затемнить одно изображение, а другое изображение, вы используете два элемента изображения. Вы устанавливаете непрозрачность нового на ноль, устанавливаете новый .src на нем, делаете два изображения поверх друг друга, затемняете старое и постепенно добавляете новое.
jfriend00 03 дек. 2013, в 00:43

Теги:

javascript

jquery

image

fadein

fadeout

1 ответ

Ещё вопросы

Эта строка $("#image").attr("src").change().fadein(); без разницы. .attr("src") возвращает строку, у которой нет метода .change() что приведет к ошибке. Обычно, если вы хотите затемнить одно изображение, а другое изображение, вы используете два элемента изображения. Вы устанавливаете непрозрачность нового на ноль, устанавливаете новый .src на нем, делаете два изображения поверх друг друга, затемняете старое и постепенно добавляете новое.

jfriend00 · Answer 1 · 2013-12-03T00-01-00.000Z

Я действительно не могу сказать, что вы пытаетесь сделать со всем своим кодом. Здесь представлено простое слайд-шоу jQuery, которое использует два объекта изображения друг над другом. Он затухает один, а затем исчезает. Предполагается, что изображения были предварительно загружены, и у вас есть контейнер div с соответствующим CSS для его форматирования (вы можете увидеть эти детали в 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, который поддерживает события