顯示帶有“下一個”和“上一個”按鈕的圖像，但無循環
[英]Display an image with 'next' and 'previous' buttons, but no loop
問題描述
我對JavaScript相當陌生，但是我已經做了很多閱讀，然后嘗試嘗試。 我已創建此代碼來顯示帶有“上一個”和“下一個”按鈕的圖像，以滾動瀏覽不同的圖片。 但是當到達終點時，它仍然允許您單擊。 我正在尋找一個代碼，當您使用“下一個”到達最后一張圖片時，您可以使用“后退”返回上一張圖片，反之亦然。 我不希望它循環播放，我只希望它到達終點，所以您必須返回按鈕。
摘要：我想顯示5張圖片：數字1至5。該頁面以圖片數字3開頭。使用“上一個按鈕”，您可以始終選擇一個較小的數字，使用下一個按鈕，您可以使用一個較大的數字，但是永遠不要超過數字1或過去的數字5。因此，如果到達末尾，則必須使用“上一個”或“下一個”按鈕（取決於您的位置）。
我希望我已經說清楚了，如果不能以正確的方式提出要求，對不起。 我真的希望你能幫助我。
謝謝！
<html> <head> <link rel="stylesheet" type="text/css" href="echo.css"> </head> <body> <div id="imageGallery"> <img id="image" src="./images/1.png" /> </div> <div id="gain"> <button id="previous" type="button">previous</button> <button id="hoger" type="button">next</button> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $( document ).ready(function() { var images = [ "./images/1.png", "./images/2.png", "./images/3.png", "./images/4.png", "./images/5.png", ]; var imageIndex = 0; $("#previous").on("click", function(){ imageIndex = (imageIndex-1); $("#image").attr('src', images[imageIndex]); }); $("#hoger").on("click", function(){ imageIndex = (imageIndex+1); $("#image").attr('src', images[imageIndex]); }); $("#image").attr(images[0]); }); </script> </body> </html>
2 個解決方案
解決方案1
0 2016-10-31 19:56:02
您只需要檢查新索引：
$(document).ready(function() { var images = [ "http://lorempixel.com/100/100/", "http://lorempixel.com/150/100/", "http://lorempixel.com/200/100/", ]; var imageIndex = 0, iLength = images.length - 1, imageEl = $('#image'), prevEl = $('#previous'), nextEl = $('#hoger'); prevEl.on("click", function() { imageIndex--; imageEl.attr('src', images[imageIndex]); nextEl.prop('disabled', false); prevEl.prop('disabled', !imageIndex); }); nextEl.on("click", function() { imageIndex++; imageEl.attr('src', images[imageIndex]); nextEl.prop('disabled', imageIndex === iLength); prevEl.prop('disabled', false); }); prevEl.prop('disabled', true); imageEl.attr(images[0]); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="imageGallery"> <img id="image" src="http://lorempixel.com/100/100/" /> </div> <div id="gain"> <button id="previous" type="button">previous</button> <button id="hoger" type="button">next</button> </div>
解決方案2
0 2016-10-31 20:05:08
達到數組的最高索引時，可以禁用該按鈕。 這是“下一步”按鈕的示例。
$(document).ready(function() { var images = [ "http://lorempixel.com/100/100/", "http://lorempixel.com/150/100/", "http://lorempixel.com/200/100/", ]; var imageIndex = 0; var iLength = images.length - 1; $("#previous").on("click", function() { imageIndex = (imageIndex - 1); $("#image").attr('src', images[imageIndex]); $("#hoger").prop("disabled", false); }); $("#hoger").on("click", function() { imageIndex = (imageIndex + 1); $("#image").attr('src', images[imageIndex]); if (imageIndex == iLength) { $(this).prop("disabled", true); } }); $("#image").attr(images[0]); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="imageGallery"> <img id="image" src="http://lorempixel.com/100/100/" /> </div> <div id="gain"> <button id="previous" type="button">previous</button> <button id="hoger" type="button">next</button> </div>
試圖使“下一個”和“上一個”按鈕在單擊時循環導航
[英]Trying to make “next” and “previous” buttons that loop through navigation onclick
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.