Question

我有幻灯片，底部有3个幻灯片列表作为链接。

我使用默认组加载幻灯片，并希望通过单击相应的组来更改组。

的Javascript

$(function() {
    var html = new Array(); //this array contains slides

    /* Loading slideshow */
    $('#get-slide').append(html[0]).slidesjs();        

    /* Changing slides group and loading the slideshow */
    $('.slides').click(function() {
        var id = $(this).data('id');
        $('#get-slide').empty().append(html[id]).slidesjs();

    }) 
});

HTML

<div id="get-slide"> 
</div>
<ul>
    <li><span class="slides" data-id="0">List of slides 1</span></li>
    <li><span class="slides" data-id="1">List of slides 2</span></li>
    <li><span class="slides" data-id="2">List of slides 3</span></li>
</ul>

但是当我点击幻灯片效果消失时，我只有那个列表。有什么问题？

Answer 1

你会试试这个。在您的HTML中，您可以立即放置所有幻灯片，并避免使用javascript：

加载它

<div class="container">
 <div class="slides" id="slide1">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
 </div>
</div>

<div class="container">
 <div class="slides" id="slide2">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
 </div>
</div>

<ul>
    <li><span class="slides" data-id="0">List of slides 1</span></li>
    <li><span class="slides" data-id="1">List of slides 2</span></li>
    <li><span class="slides" data-id="2">List of slides 3</span></li>
</ul>

你的javascript

    $.each($('.container'), function( index, value ){
        var slide= $($(this).children('.slides')[0]);
        slide.slidesjs({
            width: 940,
            height: 528
        });
    });

    $('span.slides').click(function() {
        var id = $(this).data('id');
        $('.container').hide();
        $($('.container')[id]).show();
    });

一些CSS

div[class*='container'] {
  display:none;
}

对你有帮助吗？

在jQuery幻灯片中更改图像组

1 个答案: