同一页上有2张幻灯片
[英]2 slide shows on the same page
问题描述
So I am trying to make 2 slide shows of img on the same page. 
因此，我尝试在同一页面上制作2张img幻灯片。 I have it so that one will work, but can not get the second on to work. 我拥有它，这样一个就可以工作，但不能让第二个工作。 Please help. 请帮忙。 If you need I can post the CSS for the whole thing as well. 如果您需要，我也可以发布整个CSS。 Thank you. 谢谢。
<!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:coloradomaraudersdiskgolf@gmail.com?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>
1 个解决方案
解决方案1
1 已采纳 2014-10-11 14:44:46
You should have had a look on your console! 您应该在控制台上看一下！
1) First error is TypeError: slideA is not defined because it's defined inside the setInterval. 1）第一个错误是TypeError: slideA is not defined因为它是在setInterval中定义的。
2) Don't declare multiple functions with same name! 2）不要声明多个具有相同名称的函数！
3) There's no need to define slideA multiple times. 3）无需多次定义slideA 。 Once defined you can call it as often as you need by passing the target element as argument. 定义后，您可以通过传递目标元素作为参数来根据需要多次调用它。 I pass the interval time as a second argument so each slider can have its own speed. 我将间隔时间作为第二个参数传递，因此每个滑块可以有自己的速度。
4) Better than body.onload use the window.onload event to avoid errors if images are not completely loaded. 4）比body.onload使用window.onload事件可以避免图像未完全加载时发生错误。
First remove onload="slideA()" from <body> , then your code should look like this: 首先从<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>
Now if you want to stop the first slider you can simply do (inside the window.onload): 现在，如果您想停止第一个滑块，则可以简单地进行操作（在window.onload内部）：
window.clearInterval(slider1);
Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.