如何在鼠标悬停时更改图像？

Question

我是 javascript 的新手，在鼠标悬停时更改图像时遇到问题。它必须分别通过添加和删除 "current" class 来更改鼠标悬停时的图片。我曾尝试使用 javascript 来做到这一点，但什么也没发生。请任何帮助。谢谢。

<script>
  $('.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();
            });
        });
</script>

.images-hover img {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s linear;
}

.images-hover img.current {
  opacity: 1;
  visibility: visible;
}

<div class="images-hover">
  <div class="images-box">
    <a href="#" >
      <img class="current" src="img/image1.jpg" alt=""/>
      <img src="img/image2.jpg" alt=""/>
      <img src="img/image3.jpg" alt=""/>
      <img src="img/image4.jpg" alt=""/>
    </a>
  </div>
</div>
<div class="images-hover">
  <div class="images-box">
    <a href="#" class="images-hover" >
      <img class="current" src="img/image5.jpg" alt=""/>
      <img src="img/image6.jpg" alt=""/>
      <img src="img/image7.jpg" alt=""/>
      <img src="img/image8.jpg" alt=""/>
    </a>
  </div>
</div>

Answer 1

我更改了代码段中的以下内容（现在有效）：

从 js 部分删除 <script> 标签
添加jquery参考

另请注意，您的脚本必须在 html 元素呈现后运行。您可以通过将脚本放在页面末尾或使用文档就绪事件来实现。

$(function() {
  /* your script goes here, page html has been loaded */
});

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

.images-hover img {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s linear;
}

.images-hover img.current {
  opacity: 1;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images-hover">
  <div class="images-box">
    <a href="#" >
      <img class="current" src="img/image1.jpg" alt=""/>
      <img src="img/image2.jpg" alt=""/>
      <img src="img/image3.jpg" alt=""/>
      <img src="img/image4.jpg" alt=""/>
    </a>
  </div>
</div>
<div class="images-hover">
  <div class="images-box">
    <a href="#" class="images-hover" >
      <img class="current" src="img/image5.jpg" alt=""/>
      <img src="img/image6.jpg" alt=""/>
      <img src="img/image7.jpg" alt=""/>
      <img src="img/image8.jpg" alt=""/>
    </a>
  </div>
</div>

Answer 2

您似乎在使用 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();
        });
    });
});

但您需要先导入 jquery with:

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

或者，如果您只想尝试使用 javascript，您可以检查 onmouseover 事件，一个简短的 tutorial is on w3schools about it.，但您需要更改函数以使其不使用 [=22] =] 方法。

如何在鼠标悬停时更改图像？

how to change images on mouse over?

javascript

image

mouseover