Question

我正在尝试使用Bootstrap的JavaScript折叠和标签制作幻灯片。我们的想法是拥有一个缩略图列表，可以点击这些缩略图以显示崩溃时画面的爆炸。

我希望能够点击第一个缩略图以打开崩溃，第一个缩略图被炸毁了。单击第二个缩略图时，应将第一个爆炸的图片替换为第二个缩略图。

我现在遇到的问题是，被炸毁的图像显示在一个列表中，而不是相互替换。

这是当前问题的小提琴：http://jsfiddle.net/g7nrt9b4/

小提琴代码：

<div class="panel-body">
  <ul class="thumb-list">
    <li><a href="#" data-toggle="collapse" data-target="#collapseA1" aria-expanded="false" aria-controls="collapseA1"><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></a></li>
    <li><a href="#" data-toggle="collapse" data-target="#collapseA1" aria-expanded="false" aria-controls="collapseA1"><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></a></li>
  </ul>

  <div class="collapse pic-theater" id="collapseA1">
    <img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
  </div>
  <div class="collapse pic-theater" id="collapseA2">
    <img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
  </div>
</div>

提前致谢！

Answer 1

你走了：

在您的show-img代码中添加一些课程（img），这样您就可以向他们追加click个事件。
添加一些图片加载指示器，告知用户点击缩略图时会发生某些事情（仅举例使用blockUI）。

我们准备好了：

<强> HTML ：

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">
            Title.
        </h3>
    </div>
    <div class="panel-body">
        <ul class="thumb-list">
            <li><a href="#" class="show-img"><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></a></li>
            <li><a href="#" class="show-img"><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></a></li>
            <!-- more images ... -->
        </ul>

        <div id="collapse" class="collapse pic-theater">
            <div class="block">
                <img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
            </div>
        </div>


    </div>
</div>
<img src="https://amitchandnz.files.wordpress.com/2010/08/please_wait.gif?w=614"  id="spinner" />

<强>的jQuery ：

// don't want to reload current image if it has been already loaded, so make variable for that:
var loaded = false,
    // lastclicked is the item that was last clikced. This is just a variable now, so we do not have to repeat 'var':
    lastClicked,
    // set the collapse element as variable, so we have easir to call it later on:
    collapseEl = $('#collapse');

// method that specify what should happen when the thumbnail is clicked:
$('.show-img').click( function(){
    // class 'current' is to define if the thumbnail was clicked as last, if so, collapse the panel, if not, load image of the thumbnail that was just clicked
    $('.thumb-img').removeClass('current');
    $(this).find('.thumb-img').addClass('current');        
    if(this != lastClicked){
        // the thumbnail wasn't clicked last time:
        lastClicked = this;
        loaded = false;
    }else{
        // the thumbnail was clicked last time, so we want to collapse the panel instead of reloading image again:   
        collapseEl.collapse('toggle');
        loaded = true;
    }
    if(!loaded){
        // show the panel as there's another item loaded inside:
        collapseEl.collapse('show');
        // set that this item is being loaded: 
        loaded = true;
        // fetch the image source from the thumbnail 'href' attribute:
        var img = $(this).find('.thumb-img').attr('src');
        // notify the user that something is going on while loading the image:
        $('.block').block({
            message : $('#spinner'), 
            css : {
                background : 'none', 
                border : 'none'
            }
        }); 
        // load the image:
        $('.theater-img').load( function(){
            // set image as loaded, so the click would not repeat loading process (could be skipped if the images are cached):
            loaded = false;
            // remove loading indicator:
            $('.block').unblock();
            // added [ '?'+ (new Date).getTime() ] - to simulate different images. So each new (except the one that has a 'current' class) thumbnail click tends like it's a new image:
        }).attr('src', img + '?'+ (new Date).getTime());
    }

});

// when panel is collapsed, remove class 'current' from the img, so that we know it's not displayed:
collapseEl.on('hide.bs.collapse', function () {
  $('.thumb-img').removeClass('current');
})

DEMO

带有bootstrap折叠和选项卡的幻灯片

1 个答案: