image slider with javascript with next previous button
Question
The general appearance of the program is as follows: enter image description here
the details In this exercise, we complete a simple slider. You must add the previous and next button in this event. The next or previous image should be displayed when the next or previous button is clicked. You can use the functions defined in the initial project.
When the slider is on the last image and the next button is clicked, the first image should be displayed and also when the first image of the previous button is clicked, the last image should be displayed.
Note: When an image is displayed, its opacity must be 1 and the rest of the images must be 0.
Notes You are only allowed to make changes to the main.js file. html code:
const sliderImages = [ "./images/image1.jpg", "./images/image2.jpg", "./images/image3.jpg", "./images/image4.jpg", ]; const sliderDom = document.getElementById("slider"); let currentImage = 0; function renderImages() { sliderImages.forEach((image) => { sliderDom.innerHTML += "<img src='" + image + "' />"; }); } function clearImages() { const images = document.getElementsByTagName("img"); for (let i = 0; i < images.length; i++) { images[i].style.opacity = 0; } } function showImage(image) { clearImages(); document.getElementsByTagName("img")[image].style.opacity = 1; } function init() { renderImages(); showImage(currentImage); } init(); let myBtn = document.querySelector("#prevButton"); myBtn.onclick = function() { const newImage = (currentImage + 1) % sliderImages.length; showImage(newImage); } let myBtn2 = document.querySelector("#nextButton"); myBtn2.onclick = function() { const newImage = (currentImage + 1) % sliderImages.length; showImage(newImage); }
* { margin: 0; padding: 0; } button { padding: 8px; }.container { width: 500px; margin: 20px auto; } #slider { position: relative; height: 400px; margin-bottom: 20px; } #slider img { width: 500px; height: 400px; position: absolute; transition: all.5s; }.buttons { display: flex; justify-content: space-between; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Slider</title> </head> <body> <div class="container"> <div id="slider"></div> <div class="buttons"> <button id="prevButton"><</button> <button id="nextButton">></button> </div> </div> <script src="main.js"></script> </body> </html>
1 answers
solution1
0 2022-09-12 20:53:11
var photos = ["images/img1.png", "images/img2.png", "images/img3.png", "images/img4.png"] var imgTag = document.querySelector("img"); var count = 0; function next(){ count++; if(count >= photos.length){ count = 0; imgTag.src = photos[count]; }else{ imgTag.src = photos[count]; } } function prev(){ count--; if(count < 0){ count = photos.length -1; imgTag.src = photos[count]; }else{ imgTag.src = photos[count]; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Image Slider</title> <link rel="stylesheet" href="style.css"> </head> <body> <button onclick="prev()">prev</button> <img src="images/img1:png" alt="" style="width;500px: height; 400px."> <button onclick="next()">Next</button> <script src="script.js"></script> </body> </html>
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.