Question

我有九个图像排列在网格3x3中。当我点击每个图像时，它会弹出。我也有＆lt;＆gt;有助于转到上一张和下一张图片的标志。单击图像时如何使图像转到下一图像？当我到达最后一张图片时，应该回到第一张图片吗？

这就是我目前的情况：

<body>
        <div id="image">
            <div><img src="Thumbnail/01.jpg" onClick="javascript:show(1);" style="cursor:pointer;"></div>
            <div><img src="Thumbnail/02.jpg" onClick="javascript:show(2);" style="cursor:pointer;"></div>
            <div><img src="Thumbnail/03.jpg" onClick="javascript:show(3);" style="cursor:pointer;"></div>
            <div><img src="Thumbnail/04.jpg" onClick="javascript:show(4);" style="cursor:pointer;"></div>
            <div><img src="Thumbnail/05.jpg" onClick="javascript:show(5);" style="cursor:pointer;"></div>
            <div><img src="Thumbnail/06.jpg" onClick="javascript:show(6);" style="cursor:pointer;"></div>
            <div><img src="Thumbnail/07.jpg" onClick="javascript:show(7);" style="cursor:pointer;"></div>
            <div><img src="Thumbnail/08.jpg" onClick="javascript:show(8);" style="cursor:pointer;"></div>
            <div><img src="Thumbnail/09.jpg" onClick="javascript:show(9);" style="cursor:pointer;"></div>
        </div>

        <div id="prepage"> 
            <table width="600px" height="100%" cellpadding="0" cellspacing="0" border="0" align="center">
                <tr>
                    <td align="right" valign="middle">
                        <div id="outerDiv">
                            <div id="closeIcon" onClick="hide();" onMouseOver="showIcon();"></div>
                            <div id="leftIcon" onClick="prevPic();" onMouseOver="showIcon();"></div>
                            <div id="rightIcon" onClick="nextPic();" onMouseOver="showIcon();"></div>
                            <img id="largeImg" name="largeImg" src="Original/01.jpg" border="0" onMouseOver="showIcon();" onMouseOut="hideIcon();">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </body>

Answer 1

我们假设您将图片放在带有ID＆＃39;网格的div中。

<div id='grid'><img......</div>

然后让我们说你已经放置了你的图片标签，使它们从左到右，从上到下依次排列。

//lets get all the images
var imgs=document.getElementById('grid').getElementsByTagName('img');

//store a variable to double check one is selected
var areAnySelected=false;

//loop through the images
for(var i=0;i<imgs.length;i++){

   //add code here to find the image selected. I'll use by class Name 'selected'
   if(imgs[i].className=='selected'){
       areAnySelected=true;
        //unset selected
       imgs[i].className='unselected';

        // set selected as next one if not at end
       if(i<imgs.length-1){
           img[i+1].className='selected';
       }

       // set first one as selected if at end
       else{
            imgs[0].className='selected';
        }
}

if(anyAreSelected===false){
     //select first one if nothing is selected
     imgs[0].className='selected'    
}

单击图像后如何转到下一个图像？

1 个答案: