如何使用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>