旋转木马替换鼠标悬停上的图像

Question

我做了一些谷歌搜索，但我没有发现任何适合我的问题。 某处是否有滑块/旋转木马，每个时刻都有可见的4幅图像，并且在将其中一幅图像与另一幅图像进行交换之后进行悬停？ 另外，如果不是有办法修改一些众所周知的滑块，如flexslider以这种方式工作？ 到目前为止，我试图修改flexsliders这样

CSS代码

#cf { 
    position:relative; 

    margin:0 auto; 
} 

#cf img { 
    position:absolute; 
    left:0; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

#cf img.top:hover { 
    opacity:0; 
} 

HTML

<div class="flexslider" > 
    <ul class="slides" > 
    <li> 
     <div id="cf"> 
     <img class="bottom" src="img/artists/arendarik_p.jpg" /> 
     <img class="top" src="img/artists/arendarik.jpg" /> 
     </div> 
    </li> 
    ... 

但添加更多图片后，我不得不根据图像的宽度这在某种程度上将它们设置确切laft保证金打破flexslider

在此先感谢您的任何建议

Answer 1

你可以使用插件像OWL Carousel，并创建一个jQuery脚本改变形象鼠标悬停这样的：

$(document).ready(function() { 
$("#carousel-div").hover(
owl.trigger('owl.next'); 


)}; 

Answer 2

最后我做到了使用flexslider和简单的JavaScript这样

<div class="flexslider" > 
     <ul class="slides" > 
      <li> 
       <a href="subArtists/arendarik.html"> 
       <img src="img/artists/arendarik.jpg" 
       onmouseover="this.src='img/artists/arendarik_p.jpg'" 
       onmouseout="this.src='img/artists/arendarik.jpg'" 
        border="0" alt=""/></a> 
      </li> 
      <li> 
       . 
       . 
       . 
      </ul> 
     </div