Question

我已经尝试过来自各种论坛和线程的多个指令...无论我尝试过什么我都无法让这个幻灯片在下面的结构中工作，我试图使用的幻灯片实际上比一个更复杂我在这里展示，但概念是相同的，也不会起作用：

<script>
    window.onload = slideShow();
    var slides=new Array("images/gs.png", "images/gs1.png", "images/gp1.jpg", "images/jp2.jpg");

            var slideCntr=slides.length-1
            function slideShow() 
            {
               slideCntr+=1
               if (slideCntr==slides.length) 
               slideCntr=0
               document.getElementById("slideHolder").src = slides[slideCntr]
               setTimeout("slideShow()",2000)
            }
    </script>

<body id="background" >
    <div id="underlay">
        <div class="center">
            <img id="slideHolder" src="images/gs.png" alt="1">
        </div>   
    </div> 
</body>

最终产品：

<link rel="stylesheet" type="text/css" href="css/style.css"  > 
    <link rel="stylesheet" type="text/css" href="css/slideshow.css">
    <script language="javascript" type="text/javascript"src="js/mootools-1.3.2-core.js"></script>
    <script language="javascript" type="text/javascript"src="js/mootools-1.3.2.1-more.js"></script>
    <script language="javascript" type="text/javascript" src="js/slideshow.js"></script>
    <script language="javascript" type="text/javascript" src="js/slideshow.push.js"></script>

<script>
        window.addEvent('domready', function(){
            var data = {  'gs9.png': { caption: '1' }, 'mission.png': { caption: '2' }, 'gp2.jpg': { caption: '3' }, 'underconstruction.png': { caption: '4' }};


            new Slideshow.Push('push', data, { height: 300, hu: 'images/', transition: 'back:in:out', width: 700 });
        });
    </script> 
<div id="underlay">
        <div id="push" class="slideshow">
            <img src="images/gs.png" alt="1">
        </div>   
    </div>

CSS中还有其他规则使其工作。我只编辑了它并将其合并。工作通过/分享：执照：麻省理工学院式的许可证。

Answer 1

永远不要将字符串传递给setTimeout。它在全球范围内运行。

请改为：

 setTimeout(slideShow, 2000)

不要忘记在其他地方实际执行你的功能：

slideShow();

Answer 2

这是一个使用普通javascript的简单幻灯片。

Here is the JSFiddle demo

截图：

// HTML（index.html）

<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">
<script src="index.js">
</head>
<body>
    <nav></nav>
    <section id="slider">
        <figure>
            <img src="https://myreco.me/images/news/55b089d22992f.jpg">
            <img src="https://newevolutiondesigns.com/images/freebies/hd-wallpaper-6.jpg">
            <img src="http://zhaba.ru/storage-10667/images-5354/5f87ae89312fe2ed1f845c2c2c468283_85354.jpg">
        </figure>
    </section>
</body>
</html>

// JS（index.js）

document.onreadystatechange = function(){
    if(document.readyState == "interactive"){
        slider();
    }
}   
function slider(){
    var slider = document.querySelector("figure");
    var slides = slider.children;
    setInterval(function(){
        slider.appendChild(slides[0]);
    }, 5000)
}

// CSS（index.css）

body{
    margin: 0 !important;
    height: 100vh;
    width: 100vw;
}
/* NAV */
nav{
    display: -webkit-flex;
    display: flex;
    top: 0;
    width: 100%;
    min-height: 60px;
    z-index: 999;
    position: fixed;
    background: #1E67CB;
    box-shadow: 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
/* SLIDER */
#slider{    
    display: -webkit-flex;
    display: flex;
    overflow-x: hidden;
    margin-top: 60px;
    box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
}
figure{ 
    display: -webkit-flex;
    display: flex;
    height: 40vh;
    width: 100%;
    max-height: 40vh;
    transform: translateX(0);
    margin: 0 !important;
    animation: slider 5s ease infinite;
}
@keyframes slider {
    0% { transform: translateX(0);}
    20% { transform: translateX(0);}
    50% { transform: translateX(0);}
    90% { transform: translateX(-100%);}
    100% { transform: translateX(-100%);}
}
figure>img{
    min-width: 100vw;   
}

在嵌套DIV

2 个答案: