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的幻灯片只显示上点击

回答

相关问题