Question

所以我想尝试在同一页面上制作2张img幻灯片。我有它，所以一个人会工作，但不能让第二个工作。请帮忙。如果你需要我也可以发布整个CSS的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>

Answer 1

你应该看看你的控制台了！

1）第一个错误是TypeError: slideA is not defined，因为它是在setInterval中定义的。

2）不要声明多个具有相同名称的功能！

3）无需多次定义slideA。一旦定义，您可以通过将目标元素作为参数传递，根据需要经常调用它。我将间隔时间作为第二个参数传递，因此每个滑块都有自己的速度。

4）优于body.onload使用window.onload事件，以避免在图片未完全加载时出错。

首先从onload="slideA()"删除<body>，然后您的代码应如下所示：

<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);

希望有所帮助。

2张幻灯片放在同一页面上

1 个答案: