三欄圖庫切換圖片

Question

我是新來的。沒有編碼的經驗，所以請把它放在我身上;）我唯一不能工作的是圖像畫廊顯示在三個不同的列中。

如果我複製粘貼從第一列（我只改變背景圖像類名）的所有內容，就像第一列畫廊一樣很好地顯示，但當我按下箭頭或圖片時它不起作用。

我的問題是如何更改圖像的id或哪些id應該改變，使其工作？在哪個文件中？或者，也許一些JavaScript腳本會很好地完成這項工作？

請幫忙，很快就會有截止日期。

我附上代碼鏈接，只有一列完美工作。如何讓兩個更像在同一頁面上工作？

clickMenu = function(gallery) 
 
\t { 
 
\t var getImg = document.getElementById(gallery).getElementsByTagName("IMG"); 
 
\t var getLi = document.getElementById(gallery).getElementsByTagName("li"); 
 

 
\t for (var i=0; i<getImg.length; i++) { 
 
\t \t \t getImg[i].onclick=function() { 
 
\t \t \t if ((this.className.indexOf('left-arrow'))!=-1) { 
 
\t \t \t \t for (var x=getLi.length-1; x>0; x--) { 
 
\t \t \t \t \t if ((getLi[x].className.indexOf('chosen'))!=-1) \t { 
 
\t \t \t \t \t \t getLi[x].className=getLi[x].className.replace("chosen", ""); 
 
\t \t \t \t \t \t x--; 
 
\t \t \t \t \t \t if (x>-1) { 
 
\t \t \t \t \t \t \t getLi[x].className+=" chosen"; 
 
\t \t \t \t \t \t \t \t if (x>-1 && x<getLi.length-7){ 
 
\t \t \t \t \t \t \t \t getLi[x].className=getLi[x].className.replace("hide", ""); 
 
\t \t \t \t \t \t \t \t \t if ((getLi[x+7].className.indexOf('hide'))==-1) 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t getLi[x+7].className+=" hide"; 
 
\t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 

 
\t \t \t if ((this.className.indexOf('right-arrow'))!=-1) { 
 
\t \t \t \t for (var x=0; x<getLi.length-1; x++) { 
 
\t \t \t \t \t if ((getLi[x].className.indexOf('chosen'))!=-1) \t { 
 
\t \t \t \t \t \t getLi[x].className=getLi[x].className.replace("chosen", ""); 
 
\t \t \t \t \t \t x++; 
 
\t \t \t \t \t \t if (x<getLi.length) { 
 
\t \t \t \t \t \t \t getLi[x].className+=" chosen"; 
 
\t \t \t \t \t \t \t \t if (x>6 && x<getLi.length) { 
 
\t \t \t \t \t \t \t \t getLi[x].className=getLi[x].className.replace("hide", ""); 
 
\t \t \t \t \t \t \t \t \t if ((getLi[x-7].className.indexOf('hide'))==-1) 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t getLi[x-7].className+=" hide"; 
 
\t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 

 

 
\t \t for (var i=0; i<getLi.length; i++) { 
 
\t \t \t getLi[i].onclick=function() { 
 
\t \t \t \t for (var x=0; x<getLi.length; x++) { 
 
\t \t \t \t \t if ((getLi[x].className.indexOf('chosen'))!=-1) \t { 
 
\t \t \t \t \t \t getLi[x].className=getLi[x].className.replace("chosen", ""); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t this.className+=" chosen"; \t \t 
 
\t \t \t } 
 
\t \t } 
 
\t }

#gallery_rooms {width: 400px;height:auto;display: inline-block;position: relative;margin:0;padding-top:300px;} 
 

 
#gallery_rooms img.left-arrow {width:10px; float:left;cursor:pointer;margin-left: 2%;margin-top: 4%;} 
 
#gallery_rooms img.right-arrow {width:10px; float:right;cursor:pointer;margin-right: 2%;margin-top: 4%;} 
 

 
#gallery_rooms ul {list-style:none; padding:0; float:left;margin:0;width:400px; height:auto; display:table-cell; vertical-align:middle; text-align:center;cursor:pointer} 
 

 
#gallery_rooms ul li {display:inline; width:50px; height:50px; float:left; margin:0 4px; border:1px solid #000; cursor:pointer;} 
 

 
#gallery_rooms ul li.hide {display:none;} 
 

 
/* using background images 1 */ 
 
#gallery_rooms ul li.th1 {background:url(../images/rooms/single-bedroom/1.jpg);background-size: 150%;} 
 
#gallery_rooms ul li.th2 {background:url(../images/rooms/single-bedroom/2.jpg);background-size: 150%;} 
 
#gallery_rooms ul li.th3 {background:url(../images/rooms/single-bedroom/3.jpg);background-size: 150%;} 
 

 
#gallery_rooms ul li img {visibility:hidden; display:block; width:50px; height:50px;background-size: 100%; 
 
} 
 

 
#gallery_rooms ul li span {display:none; position:absolute; left:61px; top:430px; width:411px;font-family:verdana, arial, sans-serif; color:#666; font-size:11px; line-height:15px; text-align:justify;} 
 
#gallery_rooms ul li b {color:#444;} 
 

 
#gallery_rooms ul li.chosen {border-color:#fff; cursor:default;} 
 
#gallery_rooms ul li.chosen div {position:absolute; left:0; top:0; width:400px; height:auto; background:#444; border:1px solid #000; border-width:1px 1px 0 1px;} 
 
#gallery_rooms ul li.chosen div i {width:400px; height:auto; display:table-cell; vertical-align:middle; text-align:center;} 
 
#gallery_rooms ul li.chosen div i img {visibility:visible; width:auto; height:auto; border:1px solid #aaa; margin:0 auto;} 
 
#gallery_rooms ul li.chosen span {display:block;}

<body onload="clickMenu('gallery_rooms')"> 
 
    <article class="one-third promo"> 
 
<div id="gallery_rooms"> 
 
<ul> 
 
<img class="left-arrow" src="images/ico/arrow-left.png" alt="left-arrow" title="" /> 
 
    <li class="chosen th1"><div><i><em></em><img class="start" src="http://www.cssplay.co.uk/menu/trees/t1.jpg" title="" alt="" /> </i></div> 
 
    </li> 
 
    <li class="th2"><div><i><em></em><img src="http://www.cssplay.co.uk/menu/trees/t2.jpg" title="" alt="" /></i></div> 
 
    </li> 
 
    <li class="th2"><div><i><em></em><img src="http://www.cssplay.co.uk/menu/trees/t3.jpg" title="" alt="" /></i></div> 
 
    </li> 
 
    <img class="right-arrow" src="images/ico/arrow-right.png" alt="right-arrow" title="" /> 
 

 
</ul> 
 

 
     </body>

Answer 1

解決的，物質不關閉div標籤，我只加了兩個不同的gallery_rooms的div並分別打電話給他們。