Question

我有一个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);
});

Answer 1

一种解决方案是创建三个类，＆＃34;先前＆＃34;，＆＃34;活跃＆＃34;和＆＃34; next＆＃34;并绝对定位这些课程，以便＆＃34;之前＆＃34;离开屏幕左边，＆＃34;当前＆＃34;屏幕上显示＆＃34; next＆＃34;离屏幕右边。你可以使用CSS3来动画他们的位置，JS可以根据活动图像来切换他们的类。因此，当幻灯片循环通过用户时，将看到＆＃34;之前的＆＃34;图像过渡到＆＃34;当前＆＃34;从左到右在屏幕上的位置，以及＆＃34;当前＆＃34;图像到＆＃34;下一个＆＃34;屏幕上的位置。

循环基于缩略图的路径中的图像

1 个答案: