我有一个关于我的 slider 的问题。
我创建了这个DEMO来自代码笔。
在此演示中,您可以看到我有缩略图和大图像。当您将鼠标悬停在缩略图上时,大图像就会发生变化。
但我想添加自动播放。我的自动播放功能正常,但仅适用于缩略图,而不适用于大图像(它不会改变)。我可以做什么来解决这个问题?
jQuery(document).ready(function ($) {
function do_slide(){
interval = setInterval(function(){
moveRight();
}, 1000);
}
do_slide();
$('ul li').hover(function(){
clearInterval(interval);
});
$('ul li').mouseleave(function(){
do_slide();
});
var slideCount = $('#gallery ul li').length;
var slideWidth = $('#gallery ul li').width();
var slideHeight = $('#gallery ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#gallery').css({ width: slideWidth, height: slideHeight });
$('#gallery ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#gallery ul li:last-child').prependTo('#gallery ul');
function moveLeft() {
$('#gallery ul').animate({
left: + slideWidth
}, 100, function () {
$('#gallery ul li:last-child').prependTo('#gallery ul');
$('#gallery ul').css('left', '');
});
};
function moveRight() {
$('#gallery ul').animate({
left: - slideWidth
}, 100, function () {
$('#gallery ul li:first-child').appendTo('#gallery ul');
$('#gallery ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
$(document).ready(function() {
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
最佳答案
如果您替换 moveRight 函数:
function moveRight() {
$('#gallery ul').animate({
left: - slideWidth
}, 100, function () {
$('#gallery ul li:first-child').appendTo('#gallery ul');
$('#gallery ul').css('left', '');
});
};
与:
function moveRight() {
$('#gallery ul').animate({
left: - slideWidth
}, 100, function () {
var child = $('#gallery ul li:first-child');
$('#main-img').attr('src', $('img', child.next()).attr('src').replace('thumb/', ''));
child.appendTo('#gallery ul');
$('#gallery ul').css('left', '');
});
};
如果您正在寻找的话,这将使您的图库图像随缩略图一起移动?
关于javascript - 图像上的缩略图可通过 slider 更改更大的图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26384065/