Question

我制作了一个带有两个图像的滑块，我在一定的秒数后让它改变但是我想让它在之后返回到原始图像而不仅仅是停止。

jsfiddle - http://jsfiddle.net/bsu31hso/4/

<article>
        <div class="slider">
        <img id="pic1" src="images/main-banner.png" alt="main banner" class="main_banner">
        <img id="pic2" src="images/nutrition-banner.png" alt="nutrition banner" class="main_banner ">
        </div>
</article>




<script type="text/javascript">
    $(document).ready(function(){

        $("#pic1").show(function(){
            $("#pic1").fadeOut(5000);
            $("#pic2").fadeIn();

        });

    });
</script>

Answer 1

几点：

1）你所做的不是滑块..不符合定义

如果你想用水平滑动

创建一个滑块用户jQuery animate()

2）使用setInterval()以期望的时间间隔滑动图像

3）一种基本方法是使用循环数组一遍又一遍地继续遍历相同的值

4）使用is(":visible")检查每个包含每个图像的id的数组元素，这将有助于检测它是否可见，并且从那时起已经选择了时间然后将下一个图像的数组索引增加到通过使用animate()

滑动来显示希望你理解！

我已经为您完成了代码

DEMO

试图使图像滑块循环

1 个答案: