幻灯片中的幻灯片

Question

我如何拥有默认的缩略图幻灯片，例如 gallerific！当用户单击缩略图时，有 4-5 张幻灯片（例如，一朵花的五张不同的镜头）然后成为幻灯片。

或者，如何拥有许多画廊，以及一个在幻灯片中显示每个画廊的第一张图像的脚本？

谢谢@thastark。这就满足了上面的请求。有人可以建议如何使用 NIVO Slider 并使用它的自动播放（对于 3 个大图像）和标题？

或者这是我尝试更改 此线程 中的建议脚本以获得 3 个大图像旋转：

<div id="main">
<div id="pages">
<div class="navi"></div>
<div class="scrollable">
<div class="items">
       <div class="item"><img id = "img1" class= "active" src= "images/main_img1.jpg"></img></div>
       <div class="item"><img id = "img2"  src= "images/main_img2.jpg"></img></div>
       <div class="item"><img id = "img3"  src= "images/main_img3.jpg"></img></div>
       <div class="item"><img id = "img4"  src= "images/main_img4.jpg"></img></div>
   </div>
</div></div></div></div>

current_string = $("#main img.active").attr('id');
current = current_string.charAt(3); //get the current image number
current++;
if (current > 4){ //check if current image is the last image display first image
    current = 1;
}
current_string = "img" + current;
$("#main img.active).removeClass('active').fadeOut(1000, function(){ //fadeOut existing image
    $("#main img").each(function(){
        if($(this).attr('id') == current_string){
            $(this).addClass('active').fadeIn(1000) //fadeIn next image
        }
    });
});

Answer 1

即使我想要这样的东西，你也可以查看我发布的问题。

但我暂时通过使用 jQuery 对话框解决了 Nivo 滑块的问题，即我使用单击事件将滑块加载到单独的对话框中。在“slideShowEnds”上，我触发了另一个滑块的单击事件（该滑块被加载到他自己的对话框中）[对话框的宽度、高度、位置等保持不变]

Answer 2

我以前使用过 jQuery 工具。不是那么小但还算不错。

这与您所说的类似（嵌套幻灯片）：
http://flowplayer.org/tools/demos/scrollable/site-navigation.htm

这是描述：
http://flowplayer.org/tools/demos/scrollable/site-navigation.html

Answer 3

http://gloryplus.com/index.php?route=product/product&path=82&product_id=291

<script type="text/javascript">
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index < $('#bigPic img').length){
        var indexImage = $('#bigPic img')[index]
        if(currentImage){
            if(currentImage != indexImage ){
                $(currentImage).css('z-index',2);
                clearTimeout(myTimer);
                $(currentImage).fadeOut(300, function() {
                    myTimer = setTimeout("showNext()", 3000);
                    $(this).css({'display':'none','z-index':1})
                });
            }
        }
        $(indexImage).css({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $('#thumbs li').removeClass('active');
        $($('#thumbs li')[index]).addClass('active');
    }
}

function showNext(){
    var len = $('#bigPic img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}

var myTimer;

$(document).ready(function() {
    myTimer = setTimeout("showNext()", 3000);
    showNext(); //loads first image
    $('#thumbs li').bind('mouseover',function(e){
        var count = $(this).attr('rel');
        showImage(parseInt(count)-1);
    });
});