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

Ive done some googling but i didnt find nothing suitable for my problem. Is somewhere out there slider/carousel which has visible i.e 4 images every moment and after hover on one of the exact one image is swapped with another one ? Also if not is there a way to modify some well known sliders such as flexslider to work that way ? So far i tried modify flexsliders code like this

我做了一些谷歌搜索,但我没有找到适合我的问题。在某处有滑块/旋转木马,每时每刻都可以看到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>
    ...

but after adding more images i had to set them exact laft margin according to width of image which somehow broke flexslider

但是在添加了更多的图像后,我必须根据图像的宽度设置它们的确切的边缘,这会以某种方式破坏flexslider

thanks in advance for any advice

提前感谢任何建议

2 个解决方案

#1

You could use a plugin like OWL Carousel and create a jquery script to change image on mouse hover like this:

您可以使用像OWL Carousel这样的插件并创建一个jquery脚本来更改鼠标悬停时的图像,如下所示:

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


)};

#2

Finally i did it this way using flexslider and simple javascript

最后我用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

#1