如何导入图像/按钮点击更改它们？

-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

如何导入图像/按钮点击更改它们？

回答

相关问题