Question

如何制作缩略图的默认幻灯片，例如gallerific！当用户点击缩略图时，有4-5张幻灯片（比如五朵不同的花朵）然后是幻灯片。

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

谢谢@thastark。这照顾了上述要求。有人可以建议如何拍摄NIVO Slider并使用它的自动播放（对于3张大图片）和标题吗？

或者这是我尝试改变this thread中建议的脚本以使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滑块的问题，即我将滑块加载到单独的对话框中，点击事件＆amp;在“slideShowEnds”上，我触发了另一个滑块的click事件（在自己的对话框中加载）[对话框的宽度，高度，位置等保持不变]

Answer 2

之前我使用过jQuery Tools。不是那么小但体面。

这类似于你所说的（嵌套幻灯片）： 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);
    });
});

幻灯片中的幻灯片

3 个答案: