jQuery автоматически затухает в/исчезает галерея - jQuery не находит изображения

Я пытаюсь создать автоматическую галерею fadeIn/fadeOut на загрузке страницы. То, что я также хотел бы сделать, - сделать каждое изображение ссылкой на страницу, image1, перевести вас на одну страницу image2 в другую и так далее. проблема у меня есть jQuery, не находя изображения в подпапке и создавая код для создания каждого изображения ссылки. Кроме того, поскольку на этой странице будет несколько таких галерей, могу ли я добавить задержку в каждую галерею, поэтому первая галерея загружается за несколько секунд до следующей?jQuery автоматически затухает в/исчезает галерея - jQuery не находит изображения

HTML:

<body> 
    <div id="ad1pic"> 
     <h3 id="imageCaption"></h3> 
     <img src="gallery/slides/Daisy.jpg" alt="" id="picture"> 
    </div> 
</body

JavaScript:

// JavaScript 
$(document).ready(function() { 
    var imageName=["Daisy.jpg","Diamond.jpg","Heart.jpg","Unique.jpg"]; 
    var imageTitle=["Daisy","Diamond","Heart","Unique"] 
    var counter = 0; 

    var clickaway = 
     function go(){ 
      $("#picture").fadeOut(3000, function(){ 
       $("#picture").attr("src", imageName[counter]); 
       $("#imageCaption").text(imageTitle[counter]); 
       counter++; 
       if (counter > 2) {counter = 0;} 
       $("#picture").fadeIn(900).delay(7000); 
       go(); 
      }); 
     } 
    clickaway(); 
    //$("#picture").click(clickaway); 
});//end of document ready

источник

2015-04-07 Stephen Jon

Кшиштоф Hasiński, вы взломали! вы так сильно любите звезды, вытягиваете мои волосы весь день! спасибо :) –

Ваши значения массива не имеют записей каталога, таким образом, дети загружаются из неверного каталога. Либо измените запись массива на включение полных путей, либо укажите атрибут базового каталога для изображения, которое вы читаете с атрибутом данных HTML5. Я включил рабочий пример более поздней версии - пытаясь оставить ваш оригинальный сценарий как можно более неповрежденным.

Неплохая практика постоянного повторного поиска селектора, поэтому я сделал небольшую оптимизацию и сохранил селектор $ ('# picture') в переменной. Технически вы должны попытаться ограничить себя одним объявлением var в методе, хотя он будет работать так же, как и у вас.

$(document).ready(function() { 
 
    var imageName=["Daisy.jpg","Diamond.jpg","Heart.jpg","Unique.jpg"]; 
 
    var imageTitle=["Daisy","Diamond","Heart","Unique"] 
 
    var counter = 0; 
 
    var $pic = $('#picture'); 
 
    function go() { 
 
      $pic.fadeOut(3000, function(){ 
 
       $pic.attr("src", $pic.data('basedir') + '/' + imageName[counter]); 
 
       $("#imageCaption").text(imageTitle[counter]); 
 
       counter++; 
 
       if (counter >= imageName.length) {counter = 0;} 
 
       $pic.fadeIn(900).delay(7000); 
 
       go(); 
 
      }); 
 
     } 
 
    go(); 
 
    $pic.click(go); 
 
});//end of document ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="ad1pic"> 
 
    <h3 id="imageCaption"></h3> 
 
    <img src="gallery/slides/Daisy.jpg" data-basedir="gallery/slides" alt="" id="picture"> 
 
</div>

источник

2015-04-07 21:30:51

Спасибо Скотту, у меня все еще есть та же проблема, нет изображения, исчезающего или выходящего, только одно изображение маргаритки исчезает, а затем ничего, подпись меняется с тем, что предназначено для изображения, но нет изображения –

Я не загрузил его с реальными изображениями - добавив некоторые изображения. Я вижу, что у вас было несколько небольших ошибок с вашим циклом (счетчик> = длина массива), а также ненужная копия функции для переменной с вашей функцией go - которая Я удалил. Нагрузки и петли красиво теперь. Я отредактировал свое оригинальное сообщение, чтобы отразить эти изменения. –

Спасибо, Скотт очень благодарен :) –

jQuery автоматически затухает в/исчезает галерея - jQuery не находит изображения

ответ

Смежные вопросы