如何使用jQuery将图像翻转？

Question

我是js的新手，我需要在悬停时更改多个图像，像这样的想象：滑块上的http://www.revzilla.com/ ，有什么建议吗？

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

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

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

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>