Question

我几天前用另一个名字发布了这个问题，但是更多的工作似乎帮助我缩小了问题的范围，这就是：

我有一个网站，访问者可以点击各种按钮来显示一个显示部分，其中包含与他们点击的图块相关的图片和文字。但是，我希望显示器还包括相关的幻灯片，而不仅仅是静态图像。问题是，只会显示第一张幻灯片。我相信这个问题存在于jquery 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脚本中的一行一样，当用户点击不同的按钮时会重置该功能。感谢。

Answer 1

尝试类似

的内容

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

jquery幻灯片只显示点击几个幻灯片中的第一个

1 个答案: