JQuery слайд-шоу показывает только первый из нескольких слайдов по щелчку

Я отправил эту проблему под другим именем пару дней назад, но работать над ней еще немного, кажется, помог мне сузить проблему, которая заключается в следующем:JQuery слайд-шоу показывает только первый из нескольких слайдов по щелчку

У меня есть сайт, на котором посетитель может щелкнуть различными кнопками, чтобы открыть секцию отображения с картинками и текстом, связанным с плиткой, которую они нажимают. Тем не менее, я хочу, чтобы на дисплее ТАКЖЕ включалось связанное слайд-шоу, а не только статические изображения. Проблема в том, что показывается только ПОЛНОЕ слайд-шоу. Я считаю, что проблема лежит где-то в сценарии jquery fadein. Похоже, ему нужен способ «сбросить» функцию fadein, когда пользователь нажимает на другую кнопку. Вот сценарий и ниже, что вся страница (сокращенная модель ... что делает работу, за последние два (из трех, за исключением) слайд-шоу

$(function() { /*for the slide show*/ 
    $ds = $('.fadein div'); 
    $ds.hide().eq(0).show(); 
    setInterval(function() { 
     $ds.filter(':visible').fadeOut(function() { 
      var $div = $(this).next('div'); 
      if ($div.length === 0) { 
       $ds.eq(0).fadeIn(); 
      } else { 
       $div.fadeIn(); 
      } 
     }); 
    }, 5000); //time 
});

Вот весь скрипт:. (FadeIn является вторая функция в разделе сценария).

<!doctype html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>CSS_TEST</title> 
    <link rel="stylesheet" type="text/css" href="ccre_theme.css" /> 
    <style type="text/css"> 
    #displays .hidden { 
     /* if any of the items in the id group "displays" group has the class "hidden", it will not be displayed*/ 
     display: none; 
    } 
    #buttons { 
     width: 50%; 
     float: left; 
    } 
    #displays { 
     width: 50%; 
     float: left; 
    } 
    </style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { /*for the buttons/displays*/ 
    window.$ViewItem = $('#displays .default'); 
    $('#buttons').on('click', 'div', function (e) { 
     var $el = $('#displays .' + e.target.className); 
     window.$ViewItem.addClass('hidden'); 
     $el.removeClass('hidden');   
     window.$ViewItem = $el; 
    }); 
}); 

$(function() { /*for the slide show*/ 
    $ds = $('.fadein div'); 
    $ds.hide().eq(0).show(); 
    setInterval(function() { 
     $ds.filter(':visible').fadeOut(function() { 
      var $div = $(this).next('div'); 
      if ($div.length === 0) { 
       $ds.eq(0).fadeIn(); 
      } else { 
       $div.fadeIn(); 
      } 
     }); 
    }, 5000); //time 
}); 
</script> 
</head> 

<body> 

<div id="displays"> 
    <div class="default">This is default content. in a div</div> 

    <div class="4 hidden">This is content 4 in a div with slide show 
     <div class="fadein"> 
      <div id="slidebox"><img src="../images/1386762_00B.jpg" height="200px" /></div> 
      <div id="slidebox"><img src="../images/1386637_00B.jpg" height="200px" /></div> 
      <div id="slidebox"><img src="../images/1385667_00B.jpg" height="200px" /></div> 
     </div> 
    </div> 

    <div class="5 hidden">This is content 5 in a div with slide show 
     <div class="fadein"> 
      <div id="slidebox"><img src="../images/1382602_00B.jpg" height="200px" /></div> 
      <div id="slidebox"><img src="../images/1382108_00B.jpg" height="200px" /></div> 
      <div id="slidebox"><img src="../images/1381708_00B.jpg" height="200px" /></div> 
     </div> 
    </div> 

     <div class="6 hidden">This is content 6 in a div with slide show 
     <div class="fadein"> 
      <div id="slidebox"><img src="../images/1377941_00B.jpg" height="400px" /></div> 
      <div id="slidebox"><img src="../images/1376861_00B.jpg" height="400px" /></div> 
      <div id="slidebox"><img src="../images/1373099_00B.jpg" height="400px" /></div> 
     </div> 
    </div> 

</div> 

<div id="buttons"> 
    <div class="4">Show 4 slideshow</div> 
    <div class="5">Show 5 slideshow</div> 
    <div class="6">Show 6 slideshow</div> 
</div> 
</body> 
</html>

Все идеи для меня? Как я уже сказал, я думаю, что это должно нужно что-то вроде линии в FadeIn скрипт, который будет сброшен эту функцию, когда пользователь нажимает другую кнопку

источник

2014-09-18 phc_joe

Таким образом, проблема заключается в том, что у него нет возможности перейти от слайд-шоу к слайд-шоу. $ ds содержит все слайд-шоу, но когда он заканчивает первую группу (нет следующего 'div', поэтому' if' проходит), он сбрасывается до начала. Вы должны включить слайд-шоу для того, что активно, и отключить его для остальных. –

Попробуйте что-нибудь наподобие

$(function() { /*for the slide show*/ 
    $ds = $('.fadein div'); 
    $ds.hide().eq(0).show(); 
    var slideInterval = setInterval(function() { 
     $ds.filter(':visible').fadeOut(function() { 
      var $div = $(this).next('div'); 
      if ($div.length === 0) { 
       $ds.eq(0).fadeIn(); 
      } else { 
       $div.fadeIn(); 
      } 
     }); 
    }, 5000); //time 
}); 

$('.yourButton').click(function() { 
    clearInterval(slideInterval); 
});

источник

2014-09-18 21:10:45

Благодарим вас за это предложение, но оно вообще не изменило поведение страницы. Я также попытался заменить ваш скрипт fadein для оригинала. И поместил строку clearInterval в каждую позицию раздела window.viewItem и на одной из позиций, которые он начал частично работать (все снимки для выбранного элемента открывались одновременно, а не как слайд-шоу), поэтому здесь может быть начало решения. –

JQuery слайд-шоу показывает только первый из нескольких слайдов по щелчку

ответ

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