基于缩略图在路径中循环浏览图像

looping through images from a path based on thumbnail

本文关键字：循环 浏览 图像 路径 于缩 略图      更新时间：2023-09-26

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

一个解决方案是创建三个类，"上一个"、"活动的"answers"下一个"，并绝对定位这些类，使"前一个"在屏幕左侧，"当前"在屏幕上显示，"下一步"在屏幕右侧。您可以使用CSS3来设置它们的位置动画，并使用JS根据活动图像切换它们的类。因此，当幻灯片循环播放时，用户将看到"上一个"图像从左到右过渡到屏幕上的"当前"位置，以及"当前"图像到屏幕外的"下一个"位置。

相关文章：