Cycling banner photos are not working?

JavaScript
1

Hey guys! I am attempting to create a cycling banner on my homepage with the code below. Could someone please tell me what I am missing as I cannot get the three images to cycle properly. Thanks in advance!

<html lang="en-US">

<head>
    <title>Invitation Page</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
      
    <script language="Javascript" type="text/javascript"> 

    addImages1 = new Array("https://javascripteneal08.000webhostapp.com/banner1.jpg")
    addImages2 = new Array("https://javascripteneal08.000webhostapp.com/banner2.jpg")
    addImages3 = new Array("https://javascripteneal08.000webhostapp.com/banner3.jpg")    
    thisBan1 = 0
    thisBan2 = 0
    thisBan3 = 0    
    imgCt1 = addImages1.length
    imgCt2 = addImages2.length
    imgCt3 = addImages3.length
        
    function rotate() {
      if (document.images) {
        thisBan1++
        if (thisBan1 == imgCt1) {
          thisBan1 = 0
        }
        document.Banner1.src = banner1[thisBan1]
        thisBan2++
        if (thisBan2 == imgCt2) {
          thisBan2 = 0
        }
        document.Banner2.src = banner2[thisBan2]
          thisBan3++
          if (thisban3 == imgCt3) {
              thisBan3 = 0
          }

        setTimeout("rotate()", 3 * 1000)
      }
    }

  </script>
</head>

<body>
    <header>
        <div class="top">
            <a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
        </div>
        <nav>
            <ul class="topnav">
                <li><a href="index.html" class="active">Home</a>
                </li>
                <li><a href="invitation.html">Invitation</a>
                </li>
                <li><a href="gallery.html">Gallery</a>
                </li>
                <li><a href="registration.html">Registration</a>
                </li>
            </ul>

        </nav>
    </header>
    <section id="bannerImages" onload="rotate()">
	Banner Images<br/>
<img src="https://javascripteneal08.000webhostapp.com/banner1.jpg" name="Banner1" vspace="10" alt="Top Banner 1" />
<img src="https://javascripteneal08.000webhostapp.com/banner2.jpg" name="Banner2" vspace="10" alt="Top Banner 2" />
<img src="https://javascripteneal08.000webhostapp.com/banner3.jpg" name="Banner3" vspace="10" alt="Top Banner 3" />
     
    </section>
2 
    imgCt1 = addImages1.length
    imgCt2 = addImages2.length
    imgCt2 = addImages3.length

You’ve put imgCt2 twice when it should look like this:

    imgCt1 = addImages1.length
    imgCt2 = addImages2.length
    imgCt3 = addImages3.length
1 Like
3

Thank you!

I have since corrected this problem in my code, but the banner images still are not cycling properly.

4

Figured it out on my own. Please delete this thread. Thanks!

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.