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我在代码段上更改了以下内容(现在它

我是一个javascript新手,在鼠标上方更改图像时遇到问题。 它必须通过添加和删除“当前”类分别更改鼠标上的图片。 我曾尝试用javascript实现这一点,但什么也没发生。 请帮忙。 谢谢


$('.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>