Question

我是新来的。没有经验丰富的编码所以请放轻松我;）我唯一能做的就是图片库显示在三个不同的栏目中。

如果我复制粘贴第一列中的所有内容（我只更改背景图像类名称），画廊就像第一列画廊一样很好地显示，但是当我按箭头或图片时它不起作用。

我的问题是如何更改图片的ID或我应该更改哪些ID才能使其正常工作？在哪个文件？或者也许一些javascript脚本可以正常工作？

请帮助，很快就会有截止日期。

我附加了代码的链接，只有一列完美运行。如何使两个更像是在同一页面上工作？

＆＃13;

clickMenu = function(gallery) 
	{
	var getImg = document.getElementById(gallery).getElementsByTagName("IMG");
	var getLi = document.getElementById(gallery).getElementsByTagName("li");

	for (var i=0; i<getImg.length; i++) {
			getImg[i].onclick=function() {
			if ((this.className.indexOf('left-arrow'))!=-1) {
				for (var x=getLi.length-1; x>0; x--) {
					if ((getLi[x].className.indexOf('chosen'))!=-1)	{
						getLi[x].className=getLi[x].className.replace("chosen", "");
						x--;
						if (x>-1) {
							getLi[x].className+=" chosen";
								if (x>-1 && x<getLi.length-7){
								getLi[x].className=getLi[x].className.replace("hide", "");
									if ((getLi[x+7].className.indexOf('hide'))==-1)
									{
										getLi[x+7].className+=" hide";
									}
								}
							}
						}
					}
				}

			if ((this.className.indexOf('right-arrow'))!=-1) {
				for (var x=0; x<getLi.length-1; x++) {
					if ((getLi[x].className.indexOf('chosen'))!=-1)	{
						getLi[x].className=getLi[x].className.replace("chosen", "");
						x++;
						if (x<getLi.length) {
							getLi[x].className+=" chosen";
								if (x>6 && x<getLi.length) {
								getLi[x].className=getLi[x].className.replace("hide", "");
									if ((getLi[x-7].className.indexOf('hide'))==-1)
									{
										getLi[x-7].className+=" hide";
									}
								}
							}
						}
					}
				}
			}
		}


		for (var i=0; i<getLi.length; i++) {
			getLi[i].onclick=function() {
				for (var x=0; x<getLi.length; x++) {
					if ((getLi[x].className.indexOf('chosen'))!=-1)	{
						getLi[x].className=getLi[x].className.replace("chosen", "");
					}
				}
			this.className+=" chosen";		
			}
		}
	}

＆＃13;

#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;}

＆＃13;

<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>

＆＃13;

Answer 1

已解决，不关闭div标签的问题，我只添加了两个不同的gallery_rooms div并分别调用它们。

三列画廊与切换图像

1 个答案: