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）添加幻灯片。有一个Continuous选项，不需要任何代码，只需在周围的元素中添加一些data标记即可。请在他们的演示页面上查看Continuous。

我添加了一个与他们说的完全相同的片段。我的造型并不像他们的那样美妙，但是嘿。不是你要求的：）

您也可以对此fiddle进行分支以试用该库。

有关Cycle2的进一步文档，请查看他们的demos

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

1 个答案: