根据缩略图从路径中循环显示图像

我有一个保存图像缩略图的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

根据缩略图从路径中循环显示图像

回答

相关问题