Last active
May 12, 2021 22:31
-
-
Save revitalk/a94070f33f2793569bdf9339c55fbe40 to your computer and use it in GitHub Desktop.
Simple JS slideshow with autoplay, next/prev buttons, and direct buttons to slides.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1"> | |
| <title>RockFest NY 2017</title> | |
| <link rel="stylesheet" href="festival.css"> | |
| <script src="slideshow.js"></script> | |
| <script> | |
| function toggle_div(id){ | |
| if (document.getElementById(id).style.display=="block"){ | |
| document.getElementById(id).style.display="none"; | |
| }else{ | |
| document.getElementById(id).style.display="block"; | |
| } | |
| } | |
| // Closes down menus when a user interacts with other things on the page | |
| // info, dir... are the id names of the dropdown ULs. Change them if yours are different and add more as needed. | |
| var boxArray = ['info','tickets']; | |
| window.addEventListener('mouseup', function(event){ | |
| for(var i=0; i < boxArray.length; i++){ | |
| var box = document.getElementById(boxArray[i]); | |
| if(event.target != box && event.target.parentNode != box){ | |
| box.style.display = 'none'; | |
| } | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body onload="javascript:setInterval('playImageArray()',2000)"> | |
| <div id="container"> | |
| <header> | |
| <h1>RockFest NY</h1> | |
| <div id="date-loc"> | |
| <h2>June 22-24 2017</h2> | |
| <h2>Catskills NY</h2> | |
| </div> | |
| </header> | |
| <nav> | |
| <button onclick="toggle_div('main-menu')">menu</button> | |
| <ul id="main-menu"> | |
| <li><a href="#">Lineup</a></li> | |
| <li><a href="#" onclick="toggle_div('tickets')">Tickets</a> | |
| <ul id="tickets"> | |
| <li><a href="#">Day passes</a></li> | |
| <li><a href="#">Weekend Passes</a></li> | |
| <li><a href="#">VIP tickets</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#" onclick="toggle_div('info')">Info</a> | |
| <ul id="info"> | |
| <li><a href="#">Directions</a></li> | |
| <li><a href="#">FAQ</a></li> | |
| <li><a href="#">Food</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Getting There</a></li> | |
| <li><a href="#">Merch</a></li> | |
| <li><a href="#">Media</a></li> | |
| <li><a href="#">Partners</a></li> | |
| </ul> | |
| </nav> | |
| <div id="slideshow"> | |
| <img id="slide" src="images/concert1.jpg" alt="slideshow"> | |
| <div id="slidenav"><a href="#" onclick="slideshow(0)">1</a> <a href="#" onclick="slideshow(1)">2</a></div> | |
| <div id="next-prev"><a href="#" onclick="slideshowBack(); return false;">Prev</a> <a href="#" onclick="slideshowUp(); return false;">next</a></div> | |
| </div> | |
| <div id="content"> | |
| <div id="lineup"> | |
| <h3>Lineup</h3> | |
| <ul> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| <li><a href="#">Artist Name</a></li> | |
| </ul> | |
| </div> <!-- #lineup --> | |
| <section id="news"> | |
| <h3>Latest News</h3> | |
| <article><h4><span class="news-date">8.05.16 </span><a href="#">News article title 1</a></h4></article> | |
| <article><h4><span class="news-date">9.12.16 </span><a href="#">News article title 2</a></h4></article> | |
| <article><h4><span class="news-date">10.03.16 </span><a href="#">News article title 3</a></h4></article> | |
| <article><h4><span class="news-date">11.04.16 </span><a href="#">News article title 4</a></h4></article> | |
| </section> | |
| </div> <!-- #content --> | |
| <div id="sidebar"> | |
| <aside id="mailing-list"> | |
| <form action="#"> | |
| <input type="email" name="email" id="email" value="Email Address"> | |
| <input type="submit" value="Subscribe"> | |
| </form> | |
| </aside> | |
| <aside id="app"> | |
| <p><a href="#">Download the 2017 app</a></p> | |
| </aside> | |
| <aside id="direction"> | |
| <h4>Directions</h4> | |
| <a href="#"><img src="http://placehold.it/400x400" alt="festival map"></a> | |
| </aside> | |
| </div> <!-- #sidebar --> | |
| <footer> | |
| <p>Copyrights © 2016 Rockfest NY | <a href="#">Privacy policy</a> | <a href="#">Terms of Use</a></p> | |
| </footer> | |
| </div> <!-- #container --> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin:0; | |
| padding:0; | |
| } | |
| body{ | |
| font-family: arial; | |
| line-height: 1.5em; | |
| } | |
| #container{ | |
| max-width:960px; | |
| margin:0 auto; | |
| } | |
| #main-menu{ | |
| clear:both; | |
| display:none; | |
| border-top:solid 1px #999; | |
| } | |
| nav li{ | |
| border-bottom:solid 1px #999; | |
| padding:0.5em; | |
| text-align: center; | |
| list-style-type: none; | |
| } | |
| nav li li { | |
| border:none; | |
| } | |
| nav li ul{ /* hides drop down UL */ | |
| background-color: #fff; | |
| display:none; | |
| } | |
| nav li li{ | |
| display:block; | |
| } | |
| h1{ | |
| text-align:center; | |
| padding-top:1em; | |
| } | |
| #date-loc{ | |
| float:right; | |
| margin-right:0.5em; | |
| } | |
| nav button{ | |
| float:left; | |
| margin-left:0.5em; | |
| } | |
| #content, #sidebar, footer{ | |
| padding:0.5em; | |
| } | |
| #lineup, #news, aside, h1, header{ | |
| margin-bottom:1em; | |
| } | |
| aside{ | |
| border:solid 1px #999; | |
| padding:0.5em; | |
| } | |
| #lineup li{ | |
| display: inline; | |
| list-style-type: circle; | |
| font-size: 1.5em; | |
| line-height: 1.5em; | |
| } | |
| #slideshow img, #direction img{ | |
| width:100%; | |
| } | |
| footer{ | |
| clear:both; | |
| } | |
| @media (min-width: 768px) { | |
| h1{ | |
| float:left; | |
| width:30%; | |
| } | |
| nav button{ | |
| display:none; | |
| } | |
| #main-menu{ | |
| display:block; | |
| clear:both; | |
| } | |
| nav li{ | |
| display:inline-block; | |
| margin: 1em; | |
| border:none; | |
| } | |
| nav li ul{ | |
| position:absolute; | |
| border:solid 1px #999; | |
| } | |
| #content{ | |
| float:left; | |
| width:70%; | |
| } | |
| #sidebar{ | |
| float:right; | |
| width:25%; | |
| } | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // JavaScript Document | |
| var num = 0; | |
| //Replace with: relative pathes to your images, alt text, caption | |
| imgArray = [ | |
| ['images/concert1.jpg','concert 1'], | |
| ['images/concert2.jpg','concert 2'] | |
| ] | |
| //Replace with your IDs of image and caption | |
| function slideshow(slide_num) { | |
| document.getElementById('slide').src=imgArray[slide_num][0]; | |
| document.getElementById('slide').alt=imgArray[slide_num][1]; | |
| } | |
| //next button | |
| function slideshowUp() { | |
| num++; | |
| num = num % imgArray.length; | |
| slideshow(num); | |
| } | |
| //previous button | |
| function slideshowBack() { | |
| num--; | |
| if (num < 0) {num=imgArray.length-1;} | |
| num = num % imgArray.length; | |
| slideshow(num); | |
| } | |
| //autoplay | |
| function playImageArray(){ | |
| if (num==imgArray.length){ | |
| num=0; | |
| } | |
| document.getElementById('slide').src=imgArray[num][0]; | |
| num=num+1; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How to use this without autoplay?