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

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

提前感谢任何建议

Answer 1

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

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


)};

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

1 个答案: