Question

我是javascript的新手，在鼠标移动时更改图像有问题。它必须通过添加和删除“当前”类来分别更改鼠标上的图片。我尝试用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

您似乎正在使用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：

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

或者，如果您只想尝试使用javascript，可以查看onmouseover事件，简短的tutorial is on w3schools about it.，但您需要更改函数，以便它不会使用jquery方法。

Answer 2

我在代码段上更改了以下内容（现在可以使用）：

从js部分删除<script>代码
添加jquery参考

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在鼠标上更改图像？

2 个答案: