jQuery的幻燈片只顯示上點擊

幾個幻燈片的我幾天以前發佈的另一個名字這個問題，第一，但它的一些更多的工作似乎已經幫我縮小的問題，這是這樣的：jQuery的幻燈片只顯示上點擊

我有一個網站，訪問者可以點擊各種按鈕，顯示與他們點擊的圖塊相關的圖片和文字的顯示部分。但是，我希望顯示器也包括相關的幻燈片，而不僅僅是靜態圖像。問題是，只有第一張幻燈片纔會顯示。我相信這個問題存在於jquery淡入淡出的腳本中。它似乎需要一種方法來在用戶點擊不同的按鈕時「重置」淡入淡出功能。這裏是腳本，低於整個頁面（縮略模型......這不工作，除了最後兩個（三個）幻燈片

$(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 
});

這裏是整個腳本：（該淡入是在腳本部分中的第二功能）。

<!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>

有我的想法嗎？就像我說的，我覺得當用戶點擊不同的按鈕，它必須需要這樣的東西在淡入腳本將重置功能的線。謝謝。

來源

2014-09-18 phc_joe

所以問題是它沒有辦法從幻燈片放映幻燈片。 $ ds包含了所有的幻燈片，但是當它完成第一組時（沒有下一個'div'，所以'if'通過）它重置到開始。您應該打開幻燈片顯示活動的內容，並關閉其他內容。 – 2014-09-18 21:08:58

嘗試類似

$(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

謝謝你的建議，但它似乎並沒有改變頁面行爲。我也嘗試替換原來的淡入淡出腳本，並將clearInterval行放入window.viewItem部分的每個位置，並在其中一個開始部分工作的位置（所選項目的所有圖片同時打開，而不是作爲幻燈片），所以這裏可能有一個解決方案的開始。 – 2014-09-18 22:07:04

jQuery的幻燈片只顯示上點擊

回答

相關問題