如何使用jquery一个接一个地移动图像？

Question

我想保留三个块。中间块的图像应该从右向左依次移动。如何实现这一点。

<div class="logo-div"> 
    <div class="logo-top"> 
     <img src="{{media url="wysiwyg/logo_garage.png"}}" alt=""> 
    </div> 
    <div class="logo-middle"> 
     <ul> 
      <li><img src="{{media url="wysiwyg/logo1.png"}}" alt=""> </li> 
      <li><img src="{{media url="wysiwyg/logo2.png"}}" alt=""> </li> 
      <li><img src="{{media url="wysiwyg/logo3.png"}}" alt=""> </li> 
      <li><img src="{{media url="wysiwyg/logo4.png"}}" alt=""> </li> 
     </ul> 
    </div> 
    <div class="logo-bottom"> 
     <img src="{{media url="wysiwyg/logo_vehicle.png"}}" alt=""> 
    </div> 
</div> 

.logo-div{ 
    max-width:300px; 
    margin:0 auto; 
    & ul li{ 
    float:left;} 
} 

$(document).ready(function() { 
    $(".logo-middle li").show("slide", {direction: "right" }, 2000);    
}); 

但上面的代码inspite在中间块中的图像中列出的一个在另一个之下，因为它是在列表中给出并且在它没有移动。我哪里错了。请帮帮我。

Answer 1

您可以使用Cycle2插件（cycle2）添加幻灯片。有一个Continuous选项不需要任何代码，只需将一些data标签添加到您的周围元素。请在Demo页面上查看Continuous。

我收录了一个完全按照他们的话做的片段。我的造型并不像他们那样美妙，但嘿。不是你要求的:)

你也可以分支这个fiddle来试验这个库。

有关循环2进一步文档，只看到他们的demos

#gallery { 
 
    width: 100%; 
 
    border: 3px solid gray; 
 
    white-space: nowrap; 
 
    overflow-y: hidden; 
 
} 
 

 
#gallery img { 
 
    height: 200px; 
 
    margin-right: 15px; 
 
    display: inline-block; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://malsup.github.io/min/jquery.cycle2.min.js"></script> 
 
<div id="gallery" class="cycle-slideshow cycle-autoinit" 
 
data-cycle-fx="scrollHorz" 
 
data-cycle-speed="3000" 
 
data-cycle-timeout="1" 
 
data-cycle-easing="linear" 
 
> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
    <img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/> 
 
</div>