旋转木马取代图像在鼠标悬停

Carousel replacing images on mouse hover

本文关键字：鼠标 悬停 图像 取代 旋转木马      更新时间：2023-09-26

我做了一些谷歌，但我没有找到适合我的问题。是否在某处有滑块/旋转木马，其中有可见的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

提前感谢您的建议

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

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

)};

最后我用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
相关文章：