如何導入圖像/按鈕點擊更改它們？

-1

在主頁上有3個圖像和2個名爲next和previous的按鈕。當點擊下一個按鈕時，3幅圖像將變爲下3幅圖像。總圖像是100.然後點擊新的3個圖像顯示。點擊第三次，只顯示最後一張圖片。在前一個按鈕上點擊做出反轉。該代碼是在下面的，未完成如何導入圖像/按鈕點擊更改它們？

<html> 
<head> 
    <title> 
     Check! 1 
    </title> 
    <style type="text/css"> 
     #myimage { 
    position:absolute; 
    left:800; 
    top:500; 
    height: 50px; 
    width: 50px; 
} 
#myimage1 { 
    position:absolute; 
    left:500; 
    top:500; 
height: 50px; 
width: 50px; 
} 
#imageDiv 
{ 
position:static; 
top: 50px; 
left: 10px; 


} 
    </style> 
    <script type="text/javascript"> 
    var count=0;  
function image(thisImg) { 
var img = document.createElement("IMG"); 
img.src = "img/"+thisImg; 
document.getElementById('imageDiv').appendChild(img); 
} 
function test() 
    { 

     //alert("just checking yaar"); 
     if(count<4) 
     { 
     ++count; 
     console.log("count",count); 
     if(count==1) 
     { 
      image('44585_Murree-Best-Hill-Station-wallpapers-  pictures_640x320.jpg'); 
      image('91517_background-painting-used-Main-Menu-screen_640x320.jpg'); 
      image('gravityflue04-640x320.jpg'); 
     } 
     else if(count==2) 
     { 
      image('44585_Murree-Best-Hill-Station-wallpapers-pictures_640x320.jpg'); 
      image('91517_background-painting-used-Main-Menu-screen_640x320.jpg'); 
      image('gravityflue04-640x320.jpg'); 

     } 
     else if(count==3) 
     { 
      image('44585_Murree-Best-Hill-Station-wallpapers-pictures_640x320.jpg'); 
      image('91517_background-painting-used-Main-Menu-screen_640x320.jpg'); 
      image('gravityflue04-640x320.jpg'); 
     } 
     else if(count==4) 
     { 

      image('44585_Murree-Best-Hill-Station-wallpapers-pictures_640x320.jpg'); 
      image('91517_background-painting-used-Main-Menu-screen_640x320.jpg'); 
      image('gravityflue04-640x320.jpg'); 
     } 
     else 
     { 
      console.log("Invalid Count"); 
     } 
    } 
    } 
    function test2() 
    { 

     if(count>0) 
     { 
     --count;  
     console.log("count",count); 
     } 
     else 
     { 
      console.log("Invalid Count"); 
     } 
    } 

</script> 
</head> 
<body> 
<input type="image" id="myimage" value="next" name="next" src="next-button.jpg" onclick="test()"> 
    <input type="image" id="myimage1" value="" name="next" src="111645-glowing-green-neon-icon-media-a-media31-back.png" onclick="test2()">

來源

2013-11-09 user2971983

歡迎來到Stack Overflow。當在這裏提出問題時，請提供一些代碼，說明您嘗試了什麼，遇到什麼問題等。 – Charlie74

或者，如果沒有提供的東西，請不要問。 – Lugia101101

function image（thisImg）{img = document.createElement（「IMG」）; img.src =「img /」+ thisImg; document.getElementById（'imageDiv'）。appendChild（img）; } – user2971983

裝入array與圖像的名稱。空的<img />標籤（在圖片<div />中）的數量決定了一次顯示多少個圖像。將displayImage更改爲指向包含圖像的文件夾。

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
</head> 
<body> 
    <button onclick="previous();">previous</button> 
    <div id="images"> 
     <img /> 
     <img /> 
     <img /> 
    </div> 
    <button onclick="next();">next</button> 
    <script> 
     var imageSources = Array(
      "orderedList0.png", "orderedList1.png", "orderedList2.png", 
      "orderedList3.png", "orderedList4.png", "orderedList5.png", 
      "orderedList6.png", "orderedList7.png", "orderedList8.png", 
      "orderedList9.png"); 
     var firstImage = 0; 
     var increment = document.getElementById("images").children.length; 
     displayImages(); 
     function next() { 
      if (firstImage + increment < imageSources.length) { 
       firstImage += increment; 
      } 
      displayImages(); 
     } 
     function previous() { 
      if (firstImage - increment >= 0) { 
       firstImage -= increment; 
      } 
      displayImages(); 
     } 
     function displayImages() { 
      var imageDiv = document.getElementById("images"); 
      for (var imageIndex = 0; imageIndex < imageDiv.children.length ; imageIndex++) { 
       displayImage(imageDiv.children[imageIndex], imageSources[firstImage + imageIndex]) 
      } 
     } 
     function displayImage(image, src) { 
      if (src) { 
       image.src = "images/" + src; 
       image.style.display = ""; 
      } else { 
       image.style.display = "none"; 
      } 
     } 
    </script> 
</body> 
</html>

來源

2013-11-09 17:16:49 dav1dsm1th

代碼是脆弱的。如果你將任何東西添加到不是'img'的圖像'div'中，代碼將會中斷 - 所以如果你想將它們包裝在任何東西中，那麼你需要加強代碼來選擇圖像從你的CSS提供）。有些功能可以讓你做到這一點... – dav1dsm1th

個人而言，我更喜歡按鈕在任一方向移動一個圖像 - 這樣'div'總是顯示三個圖像 - 不需要隱藏'img'不需要的標籤。 – dav1dsm1th

得愛那些flyby downvotes ...大聲笑 – dav1dsm1th

也就是說可能比較容易與jQuery來解決。

這裏是一個解決方案，您可以使用：http://jqueryfordesigners.com/demo/infinite-carousel-loop.html

這裏是教程：http://jqueryfordesigners.com/automatic-infinite-carousel/

來源

2013-11-09 14:10:12

我想用javascript創建它。請幫助我.. – user2971983

如何導入圖像/按鈕點擊更改它們？

回答

相關問題