制作没有 jQuery 的循环 JavaScript 幻灯片 [重复]答案

【问题标题】：Make a looping JavaScript Slideshow without jQuery [duplicate]制作没有 jQuery 的循环 JavaScript 幻灯片 [重复]
【发布时间】：2012-09-22 03:16:50
【问题描述】：

可能重复：
trying to create simple Slide show method in Javascript

我已经学会了用 JavaScript 制作轮播图像幻灯片脚本。我认为从基础学习它比我们从框架（即时脚本）中制作一些东西要好，但我是新手。我使用我的技术编写了这个脚本，但我认为它很糟糕。

好的，这是我的问题：我不知道如何制作这个幻灯片循环，有人可以帮助我吗？谢谢

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #wrapper {
        width:400px;
        height:140px;
        position:absolute;
        left:50%;
        top:50%;
        margin: -70px 0 0 -200px;
        background: #383838;
        overflow: hidden;
        }

        #abc-container {
        position: absolute;
        width:1200px;
        height:140px;
        }

        #a {
        width:400px;
        height:140px;
        background: #FF0000;
        float: left;
        }

        #b {
        width:400px;
        height:140px;
        background: #FFFF00;
        float: left;
        }

        #c {
        width:400px;
        height:140px;
        background: #00FFFF;
        float: left;    
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="abc-container">
            <div id="a"></div>
            <div id="b"></div>
            <div id="c"></div>
        </div>
    </div>
    <div id="asas"></div>
    <div id="asass"></div>
    <script type="text/javascript">
        var runCarousel, runTimer;
        firstval = 0;
        secondval = 0;

        function Carousel(){
        firstval += 10;
        document.getElementById('abc-container').style.left = "-" + firstval + "px";
        document.getElementById('asas').innerHTML = "-" + firstval;
            if(firstval == 400)
            {
                StopRun();
                StartTimer()
                return;
            }
            if(firstval == 800)
            {
                StopRun();
                StartTimer()
                return;
            }
        runCarousel = setTimeout(Carousel, 10);
        }

        function StartTimer(){
        secondval += 1;
        document.getElementById('asass').innerHTML = "-" + secondval;
        if(secondval == 10)
        {
            StopTimer();
            Carousel();
            return;
        }
        if(secondval == 20)
        {
            StopTimer();
            Carousel();
            return;
        }
        runTimer = setTimeout(StartTimer, 1000);
        }

        function StopRun(){
        window.clearTimeout(runCarousel);
        }

        function StopTimer(){
        window.clearTimeout(runTimer);
        }

        function firstStart(){
            setTimeout("Carousel()", 10000);
        }

        firstStart();
    </script>
</body>
</html>

【问题讨论】：

请考虑发布JS Fiddle demo，或类似的；这样我们就可以看到发生了什么。而且我们不必制作自己的演示：帮助我们来帮助你。

标签： javascript slideshow

【解决方案1】：

首先有一个错误：

function firstStart(){
     setTimeout("Carousel()", 10000);
}

正确：

function firstStart(){
     setTimeout(Carousel, 10000);
}

最后，所有设置都重置为默认值并启动计时器：

在轮播中：

if(firstval == 1200){
        document.getElementById('abc-container').style.left = "0" + "px";
        firstval = 0;
        StopRun();
        StartTimer()
        return;
    }

在启动定时器中

if(secondval == 30) {
        secondval = 0;
        StopTimer();
        Carousel();
        return;
    }

DEMO

Here is my example

【讨论】：

感谢您的回复:)。但是循环看起来并不像我希望的那样平滑。第一部分（红色）刚回来，没有动画。
@user1697962 看看这个jsfiddle.net/M8GhH/2
嗨，让它像这样循环是个好主意，但我已经找到了让它循环的方法。感谢您的帮助，我建议它:)