2幻燈片放映在同一頁

所以我想在同一頁上做2個img幻燈片放映。我有這樣的一個人會工作，但不能讓第二個工作。請幫忙。如果你需要，我也可以發佈整個CSS的CSS。謝謝。2幻燈片放映在同一頁

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Colorado Marauders</title> 
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen"> 
<script language="JavaScript"> 
    function mdy(todaysdate) 
     { 
     return todaysdate.getMonth()+1 + "/" + todaysdate.getDate() +  "/" +  todaysdate.getFullYear(); 
     }; 
     mdy(new Date()); 
function slide(id, intval, total) { 
    var image = document.getElementById(id), 
     imgcount = 1; 
    image.src = "image/" + id + imgcount + ".jpg"; 
    return window.setInterval(function() { 
     if (++imgcount > total) imgcount = 1; 
     image.src = "image/" + id + imgcount + ".jpg"; 
    }, intval); 
} 
window.onload = function() 
{ 
var slider1 = slide('img', 3000, 8); 
var slider2 = slide('c1', 4000, 22); 
}; 
    </script> 


</head> 
<body > 
<header> 
<div class="title"> 
<h1>Colorado Marauders Disk Golf</h1> 
</div> 
<h3 class="event" style="text-align:center;"><a href="events.html">Events</a></h3> 
</header> 
<section> 
<div class="content"></div> 
<div><img src="image/main.jpg" style= "width:33em; height:auto; margin-right: .1em; 
margin-top: 1.9; border-color:white; border-style:solid; border-radius:50%; border- 
width:.1em; float:left; height:auto; box-shadow: .6em .6em .6em red;"></img></div > 
<div class="top"> 
<div id="container" > 
<img id="img" src="image/img1.jpg" /> 
<h1 style="text-align:center;">Check out the pictures from our last event.</h1> 
</div> 

</div > 
</section> 
<section> 
<table> 
<tr> 
<h3 class="Tmain"> 
Top 10 Tag holders 
<div class="tag"> 
<ol> 
<li style="color: white;">Shawn Gould</li> 
<li style="color: white;">Josh Cain</li> 
<li style="color: white;">Adrian Meyer</li> 
<li style="color: white;">John Allen</li> 
<li style="color: white;">Mike Brown</li> 
<li style="color: white;">Marcus Moreno</li> 
<li style="color: white;">Cameron Palen</li> 
<li style="color: white;">Tyler Moffitt</li> 
<li style="color: white;">Raymond Lewis</li> 
<li style="color: white;">Connor Madsen</li> 
</ol> 
</div> 

<h3 class="Bmain"> 
Other stuff for the group 
</h1> 
</h1> 
</tr> 
<tr> 
<h1 class="Tmain2"> 

</h1> 
<h1 class="Bmain2"> 
news 
</h1> 
</tr> 
<tr> 
<h4 class="Tmain3"> 
<div> 
<a href = "mailto:[email protected]?subject=Request to  
join"/><img  
style="height:21.3em; width:33.1em;" src="image/c1.jpg"/> 
</div> 
</h4> 
<h1 class="Bmain3"> 
<div style="text-align:center;"> 
Here are some other link that you might like. 
</div> 
<div class="fb"> 
Like us on <a href="https://www.facebook.com/pages/Colorado-Marauders 
/297312640455928?skip_nax_wizard=true&ref_type=logout_gear" target="_blank"><img 
src="image/facebook.jpg"/></a> 
</div> 
<div class="fb1"> 
<a href="http://www.discraft.com/" target="_blank"><img src="image/discraft.jpg"/></a> 
</div> 
<div class="fb2"> 
<a href="http://www.dgcoursereview.com/" target="_blank"><img src="image/dg.jpg"/></a> 
</div> 
<div class="fb3"> 
<a href="http://www.innovadiscs.com/" target="_blank"><img src="image/innova.jpg" 
/></a> 
</div> 
<div class="fb4"> 
<a href="http://www.vibramdiscgolf.com/" target="_blank"><img 
src="image/vibram.jpg"  
/></a> 
</div> 
<div class="fb5"> 
<a href="http://www.mvpdiscsports.com/" target="_blank"><img src="image/mvp.jpg"/></a> 
</div> 
<div class="fb6"> 
<a href="http://www.pdga.com/" target="_blank"><img src="image/pdga.jpg"/></a> 
</div> 
</h1> 
</tr> 
</table> 
</section> 
<footer> 
<h3> 
Colorado Marauders 
<date><script language="JavaScript"> 
sampleDate1=new Date() 
document.write (mdy(sampleDate1)) 
</script></date> 
</h3> 
</body> 
</html>

來源

2014-10-10 WayzoftheKomodo

請格式化您的代碼...！在當前狀態下它是不可讀的。 – 2014-11-03 21:31:49

你應該看看你的控制檯！

1）第一個錯誤是TypeError: slideA is not defined，因爲它是在setInterval中定義的。

2）不要聲明多個具有相同名稱的函數！

3）不需要多次定義slideA。一旦定義，您可以通過將目標元素作爲參數傳遞，根據需要隨時調用它。我把間隔時間作爲第二個參數傳遞，所以每個滑塊都可以有自己的速度。

4）優於body.onload使用window.onload事件可避免在圖像未完全加載時發生錯誤。

首先從<body>刪除onload="slideA()"，那麼你的代碼應該是這樣的：

<script language="JavaScript"> 

function mdy(todaysdate) { 
    return todaysdate.getMonth()+1 + "/" + todaysdate.getDate() + "/" + todaysdate.getFullYear(); 
    }; 
    mdy(new Date()); 
// here the global vars imgcount and total are removed, each slider has its own 

// now define function slide, first arument is id of element its applied to, 
// second is the interval in ms, third is the total amount of imgs 
function slide(id, intval, total) { 
    // define vars outside setInterval, otherwise it's always repeated 
    var image = document.getElementById(id), 
     imgcount = 1; 
    image.src = "image/" + id + imgcount + ".jpg"; // setup the first image 
    // return the interval so it becomes stopable 
    return window.setInterval(function() { 
     if (++imgcount > total) imgcount = 1; // increase and compare imgcount in one line 
     // since imgcount is always increased second compare (< 1) can be omitted 
     image.src = "image/" + id + imgcount + ".jpg"; 
    }, intval); 
} 
// when window is loaded start the slider 
window.onload = function() { 
    // start first slider by calling function slide and store it in a variable 
    var slider1 = slide('img', 3000, 8); 
    var slider2 = slide('c', 4000, 22); // same with second slider 
}; 

</script>

現在，如果你想停下來，你可以簡單地做的第一滑塊（在window.onload內）：

window.clearInterval(slider1);

希望有幫助。

來源

2014-10-11 14:44:46

所以我發佈了所有更改，現在沒有任何滑塊可以工作。我不確定我現在做錯了什麼。 – WayzoftheKomodo 2014-10-31 22:15:17

@WayzoftheKomodo哦，對不起，我使用'setTimeout'，但它應該是'setInterval'。看我的編輯，然後再試一次。如果仍然存在問題，請告訴確切的問題。 – 2014-11-01 09:38:37

謝謝先生。我已經對腳本進行了更改，頂部圖片幻燈片正在運行。第二個人還沒有做任何事，只是坐在那裏。沒有任何改變或任何它只是與默認圖像坐在那裏。我得到和我的JS錯誤，說：「類型錯誤：圖像是CMDG.html：16空」我看了看代碼，似乎沒有任何問題，所以我不知道它爲什麼給我這個。但第一張幻燈片仍然正常工作。謝謝你。 – WayzoftheKomodo 2014-11-03 20:32:44

2幻燈片放映在同一頁

回答

相關問題