根據縮略圖從路徑中循環顯示圖像

我有一個保存圖像縮略圖的div，另一個div根據縮略圖路徑加載原始圖像。即使你這樣做。我的問題是，我怎樣才能讓圖像從最後一次單擊滑動並同時繼續按順序進行。並在頁面刷新時從該隨機數繼續。我知道我的代碼有點混亂，但我是一個初學者。根據縮略圖從路徑中循環顯示圖像

HTML

<div id="thumbs"> 
    <img src="/path/img.jpg" class="img" id="img1"/> 
    <img scr="/path/water.jpg" class="img" id="img2" /> 
</div> 

<div id="slide"> 

</div>

jQuery的

function imgfun(icount){ 

var getimg = $("#img"+icount).attr('src'); 
$('#slide').html('<img src="'+getimg+'">').fadeIn("slow"); 

}; 

var icount = $("#thumbs img").size(); //total imgs found in this div 

//show random image on page refresh 
var r = Math.floor((Math.random()*icount)+1); 
imgfun(r); 


$('.img').click(function(){ 
    var src = $(this).attr('src'); 
    var id = $(this).attr('id').substring(3, $(this).attr('id').length); 

var i = '<img src="'+src+'" class="vimg"/>'; 

    $('#slide').html(i); 
    imgfun(id); 
    }); 

var auto_refresh = setInterval(
function() 
{ 
var r = Math.floor((Math.random()*icount)+1); 
imgfun(r); 
}, 4000); 
});

來源

2015-02-06 user836910

理論上，斯蒂芬妮的答案將適用於在圖像之間移動。至於從你離開的隨機數開始，你需要創建一個包含你離開的地方的cookie。 Javascript不能在頁面加載之間持續。 – 2015-02-06 19:23:38

一種解決方案是創建三個班，「以前的」，「積極」和「下一個」，絕對定位那些類，這樣「前一個」在屏幕左側，屏幕顯示「當前」，屏幕右側顯示「下一個」。你可以使用CSS3來動畫它們的位置，JS根據活動圖像的類型來切換它們的類。因此，當您的幻燈片循環播放時，用戶會看到「上一個」圖像從左到右轉換到屏幕上的「當前」位置，而「當前」圖像轉換到屏幕上的「下一個」位置。

來源

2015-02-06 19:17:57

我會試試，謝謝。 – user836910 2015-02-06 19:31:54

根據縮略圖從路徑中循環顯示圖像

回答

相關問題