使用上一個和下一個按鈕在javascript中循環瀏覽圖像
[英]Using previous and next buttons to cycle through images in javascript
問題描述
我正在使用Javascript編寫小型移動應用程序。
我正在調用以一些JSON格式的數據作為響應的遠程API。 這些數據中包含我需要在我的應用中顯示的產品圖片的網址。 我已經將JSON解析為JS數組，現在有了圖像所有URL的數組。 當我第一次加載我的應用程序時，我有一個畫布，用於顯示數組中的第一張圖像。 我有兩個按鈕，上一個和下一個。 我希望能夠使用這些按鈕通過使用數組中的URL繪制到畫布上來循環瀏覽圖像。
有任何想法嗎？
1 個解決方案
解決方案1
2 已采納 2017-04-27 21:56:57
您在尋找以下內容嗎？
// Image URLs var imageUrls = ['http://emojipedia-us.s3.amazonaws.com/cache/8b/bd/8bbd3405b0a197214e229428c23dbe60.png', 'http://emojipedia-us.s3.amazonaws.com/cache/05/d1/05d1ba284ee1a3bfe4e0f68988baafb9.png', 'http://emojipedia-us.s3.amazonaws.com/cache/99/4c/994c5997c7a509703cc53ec2000bb258.png', 'http://emojipedia-us.s3.amazonaws.com/cache/59/0c/590c832e73a472c416bf9d8bfdd02a4a.png']; // Keep track of the index of the image URL in the array above var imageShownIndex = 0; // Create a canvas var canvas = document.createElement('canvas'); var canvasContext = canvas.getContext('2d'); canvas.height = 150; canvas.width = 150; // Create a button that will load the previous image on the canvas when clicked var previousButton = document.createElement('button'); previousButton.innerHTML = 'Previous Image'; previousButton.onclick = function () { // Show images in a cycle, so when you get to the beginning of the array, you loop back to the end imageShownIndex = (imageShownIndex==0) ? imageUrls.length-1 : imageShownIndex-1; updateImage(); }; // Do same for the next button var nextButton = document.createElement('button'); nextButton.innerHTML = 'Next Image'; nextButton.onclick = function () { imageShownIndex = (imageShownIndex == imageUrls.length-1) ? 0 : imageShownIndex+1; updateImage(); }; document.body.appendChild(previousButton); document.body.appendChild(canvas); document.body.appendChild(nextButton); // Show the first image without requiring a click updateImage(); function updateImage() { // Create the Image object, using the URL from the array as the source // You could pre-load all the images and store them in the array, rather than loading each image de novo on a click var img = new Image(); img.src = imageUrls[imageShownIndex]; // Clear the canvas canvasContext.clearRect(0, 0, 150, 150); // After the image has loaded, draw the image on the canvas img.onload = function() { canvasContext.drawImage(img, 0, 0); } }
編輯：或者，如果您已經制作了HTML元素，則可以使用JavaScript來控制畫布。 例如：
<html> <body> <button id="previous_button" onclick="goToPreviousImage()">Previous Image</button> <canvas id="image_canvas" height=150, width=150></canvas> <button id="next_button" onclick="goToNextImage()">Next Image</button> </body> <script> var imageUrls = ['http://emojipedia-us.s3.amazonaws.com/cache/8b/bd/8bbd3405b0a197214e229428c23dbe60.png', 'http://emojipedia-us.s3.amazonaws.com/cache/05/d1/05d1ba284ee1a3bfe4e0f68988baafb9.png', 'http://emojipedia-us.s3.amazonaws.com/cache/99/4c/994c5997c7a509703cc53ec2000bb258.png', 'http://emojipedia-us.s3.amazonaws.com/cache/59/0c/590c832e73a472c416bf9d8bfdd02a4a.png']; var imageShownIndex = 0; var canvas = document.getElementById('image_canvas'); var canvasContext = canvas.getContext('2d'); function goToPreviousImage() { imageShownIndex = (imageShownIndex==0) ? imageUrls.length-1 : imageShownIndex-1; updateImage(); }; function goToNextImage() { imageShownIndex = (imageShownIndex == imageUrls.length-1) ? 0 : imageShownIndex+1; updateImage(); }; updateImage(); function updateImage() { var img = new Image(); img.src = imageUrls[imageShownIndex]; canvasContext.clearRect(0, 0, 150, 150); img.onload = function() { canvasContext.drawImage(img, 0, 0); } } </script> </html>
上一個和下一個按鈕可循環瀏覽div內容，僅使用javascript，而不使用jquery
[英]previous and next buttons to cycle through div content wusing only javascript and not jquery
使用animate（）在javascript中使用上一個/下一個按鈕滑動圖像
[英]Sliding images with Previous/Next buttons in javascript using animate()
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.