Question

我是js的新手，我需要在悬停时更改几张图片，如下所示：滑块上的http://www.revzilla.com/，是否有任何建议？

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

＆＃13;

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

＆＃13;

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>

请注意。解决方案是没有翻转动画。它需要改变代码的结构。

Answer 2

你正在寻找类似的东西吗？

	$('.carousel').mouseleave(function(){
		var  currentActiveImage = $('.item-show');
		var  nextActiveImage = currentActiveImage.next();

		if(nextActiveImage.length == 0)
		{
			nextActiveImage = $(".carousel #item").first();
		}
		currentActiveImage.removeClass('item-show').addClass('item-hidden');
		nextActiveImage.addClass('item-show').removeClass('item-hidden');
	});

.item-show {
  display: inline-block;
}
.item-hidden{
  display: none;
}

.info {
  position:absolute;
  top: 231px;
  left: 505px;
  background: grey;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
  <div id="item" class="item-show">
    <img  src="http://www.bu.edu/khc/files/2012/09/Video11_700x300.jpg" />
    <div class="info">
      <span>some text</span>
      <p>Price: 88$</p>
    </div>
  </div>
  <div id="item" class="item-hidden">
    <img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/traffic-700x300.jpg" />
    <div class="info">
      <span>This is Cool</span>
      <p>Price: 99$</p>
    </div>
  </div>
  <div id="item" class="item-hidden">
    <img  src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/heaven-700x300.jpg"/>
    <div class="info">
      <span>This is train</span>
      <p>Price: 100$</p>
    </div>
  </div>

如何用jquery翻转图像？

2 个答案: