放映幻燈片內幻燈片

我將如何有一個默認的縮略圖幻燈片，如gallerific！當用戶點擊縮略圖時，有4-5張幻燈片（比如花朵的五個不同花樣），然後進行幻燈片放映。放映幻燈片內幻燈片

或者，或者，如何擁有多個畫廊，以及一個在幻燈片中顯示每個畫廊的第一個圖像的腳本？

謝謝@thastark。這照顧了上述要求。有人可以建議如何採取NIVO Slider並使用它的自動播放功能（3大圖像）和標題？

OR這是我在改變中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 
     } 
    }); 
});

來源

2011-05-23 sandraqu

喲耶，聽說你喜歡的幻燈片...... – Eli 2011-05-23 15:31:42

Slideception人？ – Eli 2011-05-23 15:33:59

@Eli - 幻燈片中的幻燈片？我希望你明白這個要求的嚴重性。在夢裏有很多夢想，我的意思是幻燈片太不穩定！ – zeroef 2011-05-23 15:34:22

我以前用過jQuery的工具。不小，但體面。

這類似於你在談論（嵌套幻燈片）什麼： http://flowplayer.org/tools/demos/scrollable/site-navigation.htm

下面是說明： http://flowplayer.org/tools/demos/scrollable/site-navigation.html

來源

2011-05-23 16:17:07 thastark

Hooray！我將如何製作3張圖片......不是縮略圖，但是3張大圖片播放和循環播放，並停止播放懸停。我還需要一個標題。 – sandraqu 2011-05-23 16:54:54

基於此線程， – sandraqu 2011-05-23 16:56:23

查看可滾動的Autoscroll插件（外觀不同但仍然只是一個css皮膚）：http://flowplayer.org/tools/demos/scrollable/plugins/index.html ..在你的情況下，你必須協調停止/啓動嵌套的幻燈片。查看API中的循環引用來鏈接幻燈片轉換。對於懸停的東西，你必須使用原生的jQuery懸停事件，停止自動滾動，然後重新啓動它。對於標題，最簡單的方法就是在每張圖片幻燈片中加入標題。「滾動幻燈片」只是簡單的html元素，你可以做任何事情。 – thastark 2011-05-23 17:10:43

即使我想這樣的事情，你可以檢查我的貼疑問句出。

但暫時我通過使用jQuery對話框解決了我與Nivo滑塊的問題，即我在單獨的對話框上加載滑塊單擊事件& on「slideShowEnds」我觸發了另一個滑塊的點擊事件自己的對話框）寬度，高度，位置的對話框等保持不變]

來源

2012-03-20 11:37:48 Xzzst

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

來源

2015-05-07 05:32:58

放映幻燈片內幻燈片

回答

相關問題