幻灯片中的幻灯片

时间:2011-05-23 15:25:36

标签: jquery slideshow

如何制作缩略图的默认幻灯片,例如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
        }
    });
});

3 个答案:

答案 0 :(得分:1)

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

但暂时我通过使用jQuery对话框解决了Nivo滑块的问题,即我将滑块加载到单独的对话框中,点击事件&amp;在“slideShowEnds”上,我触发了另一个滑块的click事件(在自己的对话框中加载)[对话框的宽度,高度,位置等保持不变]

答案 1 :(得分:0)

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

这类似于你所说的(嵌套幻灯片): http://flowplayer.org/tools/demos/scrollable/site-navigation.htm

以下是说明: http://flowplayer.org/tools/demos/scrollable/site-navigation.html

答案 2 :(得分:0)

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