如何在javascript中单击存储在var中的图像_Javascript_Jquery_Html

如何在javascript中单击存储在var中的图像

javascript jquery html

如何在javascript中单击存储在var中的图像,javascript,jquery,html,Javascript,Jquery,Html,我需要点击第一张图片，让它切换到第二张图片，然后点击它切换到第三张图片，依此类推到目前为止，我有这个，它只会转到第二张图片，然后停在那里，或者立即转到第三张 <img id="imgClickAndChange" class="art_shop" name="pic" src="images/edited_images/1.jpg" style="display: none;" onClick="changeImage();changeImageAgain();">

我需要点击第一张图片，让它切换到第二张图片，然后点击它切换到第三张图片，依此类推

到目前为止，我有这个，它只会转到第二张图片，然后停在那里，或者立即转到第三张

<img id="imgClickAndChange" class="art_shop" name="pic"     src="images/edited_images/1.jpg" style="display: none;"     onClick="changeImage();changeImageAgain();">

<script language="javascript">
function changeImage() {

    if (document.getElementById("imgClickAndChange").src =     "images/edited_images/1.jpg") 
    {
        document.getElementById("imgClickAndChange").src =     "images/edited_images/2.jpg";
    }
}
</script>

<script language="javascript">
function changeImageAgain() {
if (document.getElementById("imgClickAndChange").src ==           "images/edited_images/2.jpg") 
    {
    document.getElementById("imgClickAndChange").src =           "images/edited_images/3.jpg";
    }

}
</script>


函数changeImage（）{
if（document.getElementById（“imgClickAndChange”）.src=“images/edited_images/1.jpg”）
{
document.getElementById（“imgClickAndChange”）.src=“images/edited_images/2.jpg”；
}
}
函数changeMageReach（）{
if（document.getElementById（“imgClickAndChange”）.src==“images/edited_images/2.jpg”）
{
document.getElementById（“imgClickAndChange”）.src=“images/edited_images/3.jpg”；
}
}

我还举了一个例子，这是我刚才做的另一件事。这是一个图像滑块，图像已经存储在标题中，并且每X秒加载一次新图像。是否有任何方法可以修改此选项，以便在单击按钮（或图像本身）时加载下一个图像，而不是定时加载？任何一种解决方案都会奏效。谢谢

<head>
    <script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/edited_images/1.jpg" // set image src property         to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/edited_images/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/edited_images/3.jpg"
slideimages[3] = new Image()
slideimages[3].src = "images/edited_images/4.jpg"
</script>
</head>


<img id="imgClickAndChange" class="art_shop" name="pic"     src="images/edited_images/1.jpg" style="display: none;"     onClick="changeImage();changeImageAgain();">


<script type="text/javascript">

//variable that will incement through the images

var step=0

function slideit(){
if (!document.images)
    return
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<1)
    document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<2)
    document.getElementById('imgClickAndChange').src = slideimages[step].src
 if (step<3)
    step++
 else
    step=0
setTimeout("slideit()",1000)
}

slideit()

</script>


var slidemages=new Array（）//创建新数组以预加载图像
slideimages[0]=新建图像（）//创建图像对象的新实例
SlideImage[0].src=“images/edited_images/1.jpg”//set image src property to image path，在此过程中预加载图像
slideimages[1]=新图像（）
SlideImage[1].src=“images/edited_images/2.jpg”
slideimages[2]=新图像（）
SlideImage[2].src=“images/edited_images/3.jpg”
slideimages[3]=新图像（）
SlideImage[3].src=“images/edited_images/4.jpg”
//变量，该变量将通过图像激励
var步长=0
函数slideit（）{
如果（！document.images）
返回
document.getElementById（'imgClickAndChange'）。src=slidemages[step]。src
如果（步骤你可以使它简单得多。我也不建议预加载图像，因为它会降低你的页面加载速度
试试这个：
编辑：不循环
<img id="imgClickAndChange" class="art_shop" name="pic" onClick="changeImage()">

<script>

// image sources in array. image[0] will have first image src, image[3] will have last src
var images = [
  "images/edited_images/1.jpg",
  "images/edited_images/2.jpg",
  "images/edited_images/3.jpg",
  "images/edited_images/4.jpg"
]

var step = 0;
changeImage(); // set first image src after page loads

function changeImage() {
  // exit if no images, or step = number of items in array (4)
  if (typeof images == "undefined" ||  step == images.length) return;     

  document.getElementById('imgClickAndChange').src = images[step];
  step++;
}
</script>


这非常有效！非常感谢！有什么方法可以防止它在img4之后循环回img1吗？如果它很复杂，则不必这样做：if（step==images.length）step=images.length-1；（记住images.length=4，在示例中step需要为0-3）。或者，您可以更改函数开头的返回值：如果（！images.length | | images.length==step）返回；如果step=4，它将停止函数。编辑代码…如果显示最后一个图像，函数将退出。还更改了检查图像数组