javascript - 如何用jquery翻转图像？

Question

我是 js 新手，我需要在悬停在同一个图像上时更改多个图像，如下所示:http://www.revzilla.com/在 slider 上，有什么建议吗？

这是我的 html，在 ct-image 中我有几个图像，可以将鼠标移动到容器内，并替换为其他图像:

<li class="product-primary clearfix">
  <a href="https://validator.w3.org/nu/#textarea">
    <div class="ct-image" style="background:url(imgs/product1.jpg)" data-image="imgs/product1.jpg" data-alt="">

      <div class="banner-new"><span>new</span>
        <p class="title-product-hidd">lorem</p>
      </div>
      <!--.banner-new-->
      <div class="banner-acti">
        <ul>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <!--.banner-acti-->
  </a>
  <!--effetto all'hover-->
  <div class="ct-hove">
    <div class="text-pro">
      <p class="text">I</p>
      <p class="text">I</p>
      <p class="tex">I</p>
    </div>
    <ul>
      <li class="compare-icon"><a href="#"><i class="fa fa-eye"></i></a>
      </li>
      <li class="buy-icon"><a href="#"><i class="fa fa-heart-o"></i></a>
      </li>
      <li class="wishlist-icon"><a href="#"><i class="fa fa-database"></i></a>
      </li>
    </ul>

  </div>
  <!--.ct-hover-->

  <div class="ct-descript-prod-left">
    <p class="title-prod">Name</p>
    <p>Lorem ipsum dolor sit amet, consectetur</p>
  </div>
  <!--.ct-descript-pro-bt-->
  <div class="ct-descript-prod-right">
    <h4>€ 0.000.00</h4>
    <ul>
      <li class="imgLink" data-target="#">
        <a href="#">
          <img src="">
        </a>
      </li>
      <li class="imgLink" data-target="#">
        <a href="#">
          <img src="">
        </a>
      </li>
    </ul>
  </div>
  <!--.ct-descript-pro-bt-->
</li>

Answer 1

我为您找到的最简单的解决方案:

$(document).ready(function() {
  var timeout;
  
  var flipImages = function($container) {
    var amount = $container.data("amount");
    var current = $container.data("current");
    
    if(current >= amount){
      current = 1;
    } else {
      current = current + 1;
    }

    var dataAttr = "image" + current;
    var image = $container.data(dataAttr);
    $container.fadeOut(200, function() {
      $container.css("background-image", "url(" + image + ")");
      $container.fadeIn(200);
      $container.data("current", current);
    });
    timeout = setTimeout(function() {
      flipImages($container);
    }, 1000)
  };

  $(".ct-image").hover(
    function() {
      var $that = $(this);
      timeout = setTimeout(function() {
        flipImages($that);
      }, 1000)
    }, 
    function() {
      if(timeout) {
        clearTimeout(timeout);
      }
    }
  );
});

.ct-image {
  display: block;
  height: 300px;
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ct-image" style="background-image:url(http://dummyimage.com/300x300/00eb1b/fff)"
data-image1="http://dummyimage.com/300x300/00eb1b/fff"
data-image2="http://dummyimage.com/300x300/0c00eb/fff"
data-image3="http://dummyimage.com/300x300/eb8500/fff"
data-image4="http://dummyimage.com/300x300/eb0014/fff"
data-current="1"
data-amount="4">
<!-- your content-->
</div>

注意。解决方案是不翻转动画。它需要更改代码结构。