Slideshows in HTML/Javascript -
i have tried making slideshow in js , not working, images displayed on screen in order , next , previous links send me top of page. can't work out why, know solutions work don't understand why solution not working. there many solutions have found online similar 1 , work, yet 1 doesn't, have started js imagine silly have missed. here html: (edit: moved bottom of html body)
<html> <head> <title></title> <link type="text/css" rel="stylesheet" href="css/mainpagestyle.css"> </head> <body style="background-color:white"> <div id="titlelogo"><h1>custom motorbikes</h1></div> <nav> <ul> <li><a href="">home</a></li> <li><a href="">about us</a></li> <li><a href="">full ride list</a></li> <li><a href="">custom ride</a></li> <li><a href="">contact us</a></li> <li><a href="">login</a></li> <li><a href="">register</a></li> </ul> </nav> <!-- front page slideshow: --> <img src="images/bikeperson.jpg" class="slides" style="width:100%" /> <img src="images/bikepersoncountry.jpg" class="slides" style="width:100%" /> <img src="images/bikeroad.jpg" class="slides" style="width:100%" /> <a href="#" onclick="changeimage(1); return false;">next slide</a> <br/> <a href="#" onclick="changeimage(-1); return false;">previous slide</a> <!-- front page slideshow --> <script type="text/javascript" src='js/slideshow.js'></script> </body> </html> here js:
var imgpos = 0; var changeimage(0); //called images(except first one) hidden intially var imgs = document.getelementsbyclassname("slides"); //creates array, , fills images 'slides' class var arraylength = imgs.length; function changeimage(x) { var = 0; //used counting through 'for' loop imgpos += x; //x either -1 or +1 if (imgpos > arraylength){ //if user goes beyond last img imgpos = 0; //go first img } if (imgpos < 0){ //if user goes before first img imgpos = arraylength; //go furthest img } (i = 0; < arraylength; i++){ imgs[i].style.display = "none"; //this hides images } imgs[imgpos].style.display = "block"; //this displays image want see return false; } here errors:
uncaught typeerror: cannot read property '0' of undefined(…) slideshow.js:22
uncaught typeerror: cannot read property '1' of undefined(…)
method 1 (move js bottom)
this run after of dom has loaded.
<html> <head> <title></title> <link type="text/css" rel="stylesheet" href="css/mainpagestyle.css"> </head> <body style="background-color:white"> <div id="titlelogo"><h1>custom motorbikes</h1></div> <nav> <ul> <li><a href="">home</a></li> <li><a href="">about us</a></li> <li><a href="">full ride list</a></li> <li><a href="">custom ride</a></li> <li><a href="">contact us</a></li> <li><a href="">login</a></li> <li><a href="">register</a></li> </ul> </nav> <!-- front page slideshow: --> <img src="images/bikeperson.jpg" class="slides" style="width:100%" /> <img src="images/bikepersoncountry.jpg" class="slides" style="width:100%" /> <img src="images/bikeroad.jpg" class="slides" style="width:100%" /> <a href="#" onclick="changeimage(1); return false;">next slide</a> <br/> <a href="#" onclick="changeimage(-1); return false;">previous slide</a> <!-- front page slideshow --> <script type="text/javascript" src='js/slideshow.js'></script> </body> </html> method 2 (add document ready)
this trigger dom loaded event after dom loaded.
note: can not assign function var var changeimage(0); can assign result of function variable though: var myvar = changeimage(0);
var imgpos = 0; var imgs = []; function changeimage(x) { var = 0; //used counting through 'for' loop imgpos += x; //x either -1 or +1 imgpos = imgpos + 1 > imgs.length ? 0 : imgpos; imgpos = imgpos < 0 ? imgs.length - 1 : imgpos; (let = 0; < imgs.length; i++) { imgs[i].style.display = "none"; //this hides images } imgs[imgpos].style.display = "block"; //this displays image want see console.log(imgs[imgpos]) return false; } document.addeventlistener('domcontentloaded', event => { imgs = document.queryselectorall("img.slides"); //creates array, , fills images 'slides' class changeimage(0); //called images(except first one) hidden intially });
Comments
Post a Comment