Javascript 同一页上有2个幻灯片放映_Javascript_Html_Css

Javascript 同一页上有2个幻灯片放映

javascript html css

Javascript 同一页上有2个幻灯片放映,javascript,html,css,Javascript,Html,Css,所以我试着在同一页上制作两张img的幻灯片。我有它，这样一个可以工作，但不能让第二个工作。请帮忙。如果你需要的话，我可以发布整个东西的CSS。多谢各位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Colorado Marauders</title> <link rel="stylesheet" type=

所以我试着在同一页上制作两张img的幻灯片。我有它，这样一个可以工作，但不能让第二个工作。请帮忙。如果你需要的话，我可以发布整个东西的CSS。多谢各位

    <!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>


科罗拉多掠夺者
功能mdy（今天）
{
返回todaysdate.getMonth（）+1+“/”+todaysdate.getDate（）+“/”+todaysdate.getFullYear（）；
};
mdy（新日期（））；
功能幻灯片（id、intval、总计）{
var image=document.getElementById（id），
imgcount=1；
image.src=“image/”+id+imgcount+”.jpg”；
返回窗口.setInterval（函数（）{
如果（++imgcount>total）imgcount=1；
image.src=“image/”+id+imgcount+”.jpg”；
}，intval）；
}
window.onload=函数（）
{
var slider1=幻灯片（'img'，3000,8）；
var slider2=幻灯片（'c1'，4000，22）；
};
科罗拉多掠夺者圆盘高尔夫
看看我们上次活动的照片。
十大标签持有者
肖恩·古尔德
乔希·凯恩
阿德里安·迈耶
约翰·艾伦
迈克·布朗
马库斯·莫雷诺
卡梅伦·帕伦
泰勒·莫菲特
雷蒙德·刘易斯
康纳·马德森
为小组准备的其他材料
新闻
科罗拉多掠夺者
sampleDate1=新日期（）
document.write（mdy（sampleDate1））

你应该看看你的控制台
1）第一个错误是
TypeError:slideA没有定义，因为它是在setInterval内定义的 2）不要用相同的名称声明多个函数 3）无需多次定义slideA 。定义后，您可以通过将目标元素作为参数传递，根据需要随时调用它。我将间隔时间作为第二个参数传递，这样每个滑块都可以有自己的速度 4）优于body.onload 如果图像未完全加载，请使用窗口.onload 事件避免错误首先从中删除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> 希望这能有所帮助。因此，我已经对您发布的内容进行了所有更改，但现在所有滑块都无法工作。我不确定我现在做错了什么。@WayzoftheKomodo哦，对不起，我用了setTimeout ，但应该是setInterval 。请参阅我的编辑并重试。如果还有问题，请确切地告诉我出了什么问题。谢谢你，先生。我已经对脚本进行了更改，最上面的图片幻灯片正在运行。第二个仍然什么也不做，只是坐在那里。没有任何更改或任何东西，它只是与默认图像一起放置在那里。我在我的JS中得到了一个错误，上面写着“TypeError:image在CMDG.html:16上为null”。我已经查看了代码，它似乎没有任何问题，所以我不知道为什么它会给我这个。但是，第一张幻灯片仍然运行良好。谢谢。@WayzoftheKomodo这个错误听起来好像带有id='c' （=id用于第二个滑块）的图像标记不存在。您应该检查第二个滑块的img标记在html中的id（可能是'pic' ？），并在var slider2=（…）中使用该id。好的，我现在丢失了…我将用我现在拥有的代码更新顶部的代码。如果你能指出我遗漏了什么，那就太酷了。因为我已经看遍了所有的地方，我想我只是看到了很多HTML来找到我现在缺少的东西。请格式化你的代码。。。！它在当前状态下无法读取。 window.clearInterval(slider1);