使用javascript使图像循环

时间:2017-12-10 13:11:22

标签: javascript jquery

我正在尝试使用javascript创建一个小客户端幻灯片。 到目前为止我所取得的成就是按下按钮点击图像。 以下是代码

HTML

<div class="client-slide">
    <img src="images/oma.png">
    <img src="images/pz.png">
    <img src="images/tata.png">
    <img src="images/mik.png">
    <img src="images/may.png">
    <img src="images/dang.png">
    <img src="images/vita.png">
    <img src="images/cap.png">
    <img src="images/cla.png">
    <img src="images/int.png">
</div>
<ul class="slideBtn">
    <li><div class="leftButton"><i class="fa fa-angle-left"></i></div></li>
    <li><div class="rightButton"><i class="fa fa-angle-right"></i></div></li>
</ul>

JavaScirpt

$(document).ready(function() {
    $('.leftButton').click(function() {
        $('.client-slide').animate({
            'marginLeft' : "-=100px"
        });
    });
    $('.rightButton').click(function() {
        $('.client-slide').animate({
            'marginLeft' : "+=100px"
        });
    });
});

当我点击按钮时,上面的代码工作。我想这样当我点击按钮时,位置1中的图像通过创建无限循环到达那里的最后位置。

感谢。

0 个答案:

没有答案