Javascript Next and Previous images
Question
Code is supposed to show next image when clicking on next arrow and previous image when clicked on previous arrow. It does not work though. (error occurs while assigning img.src=imgs[this.i]; it says Cannot set property 'src' of null at collection.next) .
Javascript code :
var arr = new collection(['cake.png', 'image2.png', 'image3.png', 'image1.png']); function collection(imgs) { this.imgs = imgs; this.i = 0; this.next = function(element) { var img = document.getElementById('element') this.i++; if (this.i == imgs.length) { this.i = 0; } img.src = imgs[this.i].src; } this.prev = function(element) { var img = document.getElementById('element'); this.i--; if (this.i < 0) { this.i = imgs.length - 1; } img.src = imgs[this.i].src; } }
<!DOCTYPE html> <html> <head> <title>photos</title> <script src="photos.js"></script> </head> <body> <input type='button' value='<' name='next' onclick="arr.next('mainImg')" /> <img id='mainImg' src="cake.png"> <input type='button' value='>' name='prev' onclick="arr.prev('mainImg')" /> </body> </html>
Not using jquery. I do not have enough experience in js either. Thank you for your time
3 answers
solution1
4 ACCPTED 2017-02-25 09:45:59
You had three mistakes:
- You referenced the images as
img.src = imgs[this.i].src;and you just had an array of strings, not an array of objects with asrcproperty.img.src = imgs[this.i];is the correct way to get the URL. You used
var img = document.getElementById('element');when you should have used
var img = document.getElementById(element);elementis an argument coming from youronclickevent. It holds theidof your image that you should be using."element"is just a string. You try to find an element withidequal toelementwhich doesn't exist.Edit: You should also use
<and>to represent<and>. Otherwise your HTML might get screwed up. More on that here .
var arr = new collection(['http://images.math.cnrs.fr/IMG/png/section8-image.png', 'https://www.w3.org/MarkUp/Test/xhtml-print/20050519/tests/jpeg444.jpg', "http://saturnraw.jpl.nasa.gov/multimedia/images/raw/casJPGFullS72/N00183828.jpg"]); function collection(imgs) { this.imgs = imgs; this.i = 0; this.next = function(element) { var img = document.getElementById(element); this.i++; if (this.i >= imgs.length) { this.i = 0; } img.src = imgs[this.i]; }; this.prev = function(element) { var img = document.getElementById(element); this.i--; if (this.i < 0) { this.i = imgs.length - 1; } img.src = imgs[this.i]; }; this.next("mainImg"); // to initialize with some image }
<!DOCTYPE html> <html> <head> <title>photos</title> <script src="photos.js"></script> </head> <body> <input type='button' value='<' name='next' onclick="arr.next('mainImg')" /> <img id='mainImg' src="cake.png"> <input type='button' value='>' name='prev' onclick="arr.prev('mainImg')" /> </body> </html>
This is how I'd personally do it:
var myCollection = new Collection([ "http://images.math.cnrs.fr/IMG/png/section8-image.png", "https://www.w3.org/MarkUp/Test/xhtml-print/20050519/tests/jpeg444.jpg", "http://saturnraw.jpl.nasa.gov/multimedia/images/raw/casJPGFullS72/N00183828.jpg" ], "mainImg"); document.getElementById("next_btn").onclick = function() { myCollection.next(); }; document.getElementById("prev_btn").onclick = function() { myCollection.prev(); } function Collection(urls, imgID) { var imgElem = document.getElementById(imgID); var index = 0; this.selectImage = function() { imgElem.src = urls[index]; }; this.next = function() { if (++index >= urls.length) { index = 0; } this.selectImage(); }; this.prev = function(element) { if (--index < 0) { index = urls.length - 1; } this.selectImage(); }; // initialize this.selectImage(); }
<!DOCTYPE html> <html> <head> <title>photos</title> <script src="photos.js"></script> </head> <body> <input id="next_btn" type='button' value='<' /> <img id='mainImg'> <input id="prev_btn" type='button' value='>' /> </body> </html>
solution2
0 2017-02-25 09:53:22
Why sending string into arr.next('mainImg') function ? your img element always have the same id, only change src. and document.getElementById(element) is also the same img element.
html: <img id='mainImg' src="cake.png">
js: document.getElementById('mainImg')
consider img element as a container, and id is it's identifiler.
solution3
0 2021-06-03 18:10:16
var start_pos = 0;
var img_count = document.getElementsByClassName('icons').length - 1;
var changeImg = function(direction){
pos = start_pos = (direction == "next")? (start_pos == img_count)? 0 : start_pos+1 : (start_pos == 0)? img_count : start_pos-1;
console.log(pos)
}
document.getElementById('left').onclick = function(){ changeImg("previous"); }
document.getElementById('right').onclick = function(){ changeImg("next"); }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.