我正在尝试制作一个这样的简单图像库。 http://dimsemenov.com/plugins/royal-slider/#image-gallery当我点击缩略图图像时,图像元素将创建并加载图像将出现一点时间,创建的元素将在可见区域中滑动。最后一个旧图像元素将删除。
<div id="imageGallery" style="overflow:visible;display:block;">
<div class="preview">
<div id="content" style="width:640px;height:420px;">
<img id="main-Image" alt="" src="../../baContent/image1.jpg" style="display:inline; top:0;left:0;" />
</div>
</div>
<div id="thumbnails">
<a class="thumbnail" href="../../baContent/image1.jpg"><img alt="Image 1" src="../../baContent/image1-thumb.jpg"></a>
<a class="thumbnail" href="../../baContent/image2.jpg"><img alt="Image 2" src="../../baContent/image2-thumb.jpg"></a>
</div>
$(document).ready(function () {
$(".thumbnail").click(function () {
$("#mainImage").animate({ "left": "-640px" }, "fast");
$('#preview').css('background-image', "url('../../baContent/spinner.gif')");
var img = $("<img style='left:640px;display:none;' />").attr('src', this.href).load(function () {
$('#mainImage').attr('src', img.attr('src'));
$('#preview').css('background-image', 'none');
$(this).parent().prevAll().remove();
$("#mainImage").animate({ "left": "-640px" }, "fast");
});
});
});
我写了一些代码但没有成功。任何想法或教程?
答案 0 :(得分:0)
尝试:
$(document).ready(function () {
$(".thumbnail").click(function () {
$('#main-Image').hide();
$('#preview').css('background-image', "url('../../baContent/spinner.gif')");
var imgSrc = $(this).attr('href');
var img = $("<img style='left:640px;display:none;' />").attr('src', imgSrc).load(function () {
$('#main-Image').attr('src', imgSrc);
$('#preview').css('background-image', 'none');
$('#main-Image').fadeIn();
});
return false;
});
});
您可以添加所需的所有动画。
有关好的滑块,请参阅http://bxslider.com/。