[英]Jquery swap image gallery on mouseover
我已经为我的问题创建了这个DEMO 。
在我的演示中,您可以看到当您将鼠标悬停在缩略图上时,较大的图片正在改变。 我想要什么? 我想在几秒钟后自动更改图像。
我需要做什么? 有人可以帮助我吗?
$(document).ready(function() {
$("#magazin_sldwr li img").hover(function(){
$('#mainm-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
$("#magazin_sldwr li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
使用setInterval()
setInterval(function() {
//change image
}, 2000);
其中2000是毫秒数。 只需更改一次,就可以使用setTimeout()
这是一个开始: 演示
这个想法是在当前图像的父级li
上使用.active
类,然后每2秒触发一次mouseenter
事件:
function autoChangeImage() {
setTimeout(function(){
$("#magazin_sldwr li.active")
.removeClass('active')
.next('li')
.addClass('active')
.children('img')
.trigger('mouseenter');
autoChangeImage();
}, 2000);
}
当然,您可能要在到达最后一个拇指后返回第一个拇指,并在“手动”悬停拇指时clearTimeout
: demo
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.