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

但是尽管有上面的代码，中间块中的图像还是按照列表中给出的顺序依次列出，并且其中没有移动。我哪里做错了。请帮助我。

Answer 1

您可以使用 Cycle2 插件（cycle2) to add a slideshow. There's a Continuous option which doesn't require any code, just add some data tags to your surrounding element. See Continuous 在他们的演示页面上。

我包含了一个完全按照他们说的做的片段。我的造型不像他们的那么棒，但是嘿。不是你要的:)

您也可以分支此 fiddle 来试验该库。

有关 Cycle2 的更多文档，请参阅他们的 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>

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

How to move the images one after the other using jquery?

javascript

jquery

slide