在嵌套DIV中獲取元素

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中還有其他使之起作用的規則。 我只編輯並合並了它。 作品通過/通過以下方式共享：許可證：MIT樣式的許可證。

Answer 1

切勿將字符串傳遞給setTimeout 。 它在全局范圍內運行。

改為這樣做：

 setTimeout(slideShow, 2000)

並且不要忘記在其他地方實際執行您的函數：

slideShow();

Answer 2

這是使用普通javascript的簡單幻燈片。

這是JSFiddle演示

截圖：

// 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 個解決方案

解決方案1
0 2015-09-12 22:32:56

解決方案2
0 2015-09-12 22:50:03

在嵌套DIV中獲取元素

問題描述

2 個解決方案

解決方案1 0 2015-09-12 22:32:56

解決方案2 0 2015-09-12 22:50:03

解決方案1
0 2015-09-12 22:32:56

解決方案2
0 2015-09-12 22:50:03