Javascript 如何在鼠标上更改图像?
我是一个javascript新手,在鼠标上方更改图像时遇到问题。 它必须通过添加和删除“当前”类分别更改鼠标上的图片。 我曾尝试用javascript实现这一点,但什么也没发生。 请帮忙。 谢谢Javascript 如何在鼠标上更改图像?,javascript,image,mouseover,Javascript,Image,Mouseover,我是一个javascript新手,在鼠标上方更改图像时遇到问题。 它必须通过添加和删除“当前”类分别更改鼠标上的图片。 我曾尝试用javascript实现这一点,但什么也没发生。 请帮忙。 谢谢 $('.images hover')。每个(函数(){ var$product=$(本); var$thumbs=$product.find('.images框'); var$images=$thumbs.find('img'); 如果($images.length我在代码段上更改了以下内容(现在它
$('.images hover')。每个(函数(){
var$product=$(本);
var$thumbs=$product.find('.images框');
var$images=$thumbs.find('img');
如果($images.length我在代码段上更改了以下内容(现在它可以工作了):
- 从js节中删除
标记
- 添加jquery引用
还请注意,您的脚本必须在呈现html元素后运行。您可以通过将脚本放在页面末尾或使用document ready事件来完成此操作
$(function() {
/* your script goes here, page html has been loaded */
});
$('.images hover')。每个(函数(){
var$product=$(本);
var$thumbs=$product.find('.images框');
var$images=$thumbs.find('img');
如果($images.length似乎您正在使用Jquery方法。要使用Jquery更改图像,您可以使用:
$(document).ready(function(){
$('.images-hover').each(function () {
var $product = $(this);
var $thumbs = $product.find('.images-box');
var $images = $thumbs.find('img');
if ($images.length <= 1)
return;
var interval, timeout;
var imageCallback = function () {
var $current = $thumbs.find('img.current');
var $next = $current.next();
if ($next.index() < 0)
$next = $images.first();
$current.removeClass('current');
$next.addClass('current');
};
var setCurrent = function () {
$images.removeClass('current');
$images.first().addClass('current');
};
setCurrent();
$product.hover(function () {
timeout = setTimeout(function () {
imageCallback();
interval = setInterval(imageCallback, 2500);
}, 200);
}, function () {
clearTimeout(timeout);
clearInterval(interval);
setCurrent();
});
});
});
$(文档).ready(函数(){
$('.images hover')。每个(函数(){
var$product=$(本);
var$thumbs=$product.find('.images框');
var$images=$thumbs.find('img');
如果($images.length)您能检查您的浏览器控制台是否有任何错误吗?@LearningPhase Uncaught TypeError:$不是函数您包括jquery文件您的答案解决了问题,但我还没有+1。抱歉。再次感谢。
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>