如何滾動到照片庫上的下一個縮略圖圖像

我找到了一個代碼，用於在我的網頁上創建照片庫。這是一個標準的點擊縮略圖來查看大圖片功能。它對我來說工作得很好。唯一的問題是我無法將滾動添加到下一個縮略圖圖像功能。目前的代碼只顯示5個縮略圖。我可以添加更多，但它們被顯示在多行中。我想要有一行縮略圖，只需滾動到下一個。有沒有人處理過這個？這裏是我的網頁代碼：如何滾動到照片庫上的下一個縮略圖圖像

`<html> 
<head> 
<title>Photo Gallery</title> 
<link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 
<body> 
<div id="gallery"> 

    <div id="bigimages"> 
     <div id="normal1"> 
      <img src="bigimage1.png" alt=""/> 
     </div> 

     <div id="normal2"> 
      <img src="bigimage2.png" alt=""/> 
     </div> 

     <div id="normal3"> 
      <img src="bigimage3.png" alt=""/> 
     </div> 

     <div id="normal4"> 
      <img src="bigimage4.png" alt=""/> 
     </div> 

     <div id="normal5"> 
      <img src="bigimage5.png" alt=""/> 
     </div> 

    </div> 

    <div id="thumbs"> 
     <a href="javascript: changeImage(1);"><img src="image1.png" alt="" border="0" /></a> 
     <a href="javascript: changeImage(2);"><img src="image2.png" alt="" /></a> 
     <a href="javascript: changeImage(3);"><img src="image3.png" alt="" /></a> 
     <a href="javascript: changeImage(4);"><img src="image4.png" alt="" /></a> 
     <a href="javascript: changeImage(5);"><img src="image5.png" alt="" /></a> 
    </div> 
</div>

這裏是我的CSS代碼：

`<style type="text/css"> 
<!-- 
body { 
margin: 0; 
padding: 0; 
background: #222; 
color: #EEE; 
text-align: center; 
font: normal 9pt Verdana; 
} 
a:link, a:visited { 
color: #EEE; 
} 
img { 
border: none; 
} 
#normal2, #normal3, #normal4, #normal5 { 
display: none; 
} 
#gallery { 
margin: 0 auto; 
width: 800px; 
} 
#thumbs { 
margin: 10px auto 10px auto; 
text-align: center; 
width: 800px; 
} 
#bigimages { 
width: 770px; 
float: left; 
} 
#thumbs img { 
width: 130px; 
height: 130px; 
} 
#bigimages img { 
border: 4px solid #555; 
margin-top: 5px; 
width: 750px; 
} 
#thumbs a:link, #thumbs a:visited { 
width: 130px; 
height: 130px; 
border: 6px solid #555; 
margin: 6px; 
float: left; 
} 
#thumbs a:hover { 
border: 6px solid #888; 
} 
--> 
</style>`

最後，這裏是我的JavaScript代碼：

`<script type="text/javascript"> 
function changeImage(current) { 
var imagesNumber = 5; 

for (i=1; i<=imagesNumber; i++) { 
    if (i == current) { 
     document.getElementById("normal" + current).style.display = "block"; 
    } else { 
     document.getElementById("normal" + i).style.display = "none"; 
    } 
} 
} 

</script>`

謝謝。

來源

2015-08-31 Nargis

您可以在#thumbs div內創建另一個容器，該容器足夠寬以適合一行所需的所有縮略圖，然後設置#thumbs divs溢出以滾動，以便超出寬度的縮略圖畫廊隱藏，直到滾動。

function changeImage(current) { 
 
var imagesNumber = 7; 
 

 
for (i=1; i<=imagesNumber; i++) { 
 
    if (i == current) { 
 
     document.getElementById("normal" + current).style.display = "block"; 
 
    } else { 
 
     document.getElementById("normal" + i).style.display = "none"; 
 
    } 
 
} 
 
}

body { 
 
margin: 0; 
 
padding: 0; 
 
background: #222; 
 
color: #EEE; 
 
text-align: center; 
 
font: normal 9pt Verdana; 
 
} 
 
a:link, a:visited { 
 
color: #EEE; 
 
} 
 
img { 
 
border: none; 
 
} 
 
#normal2, #normal3, #normal4, #normal5, #normal6, #normal7 { 
 
display: none; 
 
} 
 
#gallery { 
 
margin: 0 auto; 
 
width: 800px; 
 
} 
 
#thumbs { 
 
text-align: center; 
 
width: 770px; 
 
    overflow: scroll; 
 
} 
 
#thumbs #container { 
 
    width: 1500px 
 
} 
 
#bigimages { 
 
width: 770px; 
 
float: left; 
 
} 
 
#thumbs img { 
 
width: 130px; 
 
height: 130px; 
 
} 
 
#bigimages img { 
 
border: 4px solid #555; 
 
margin-top: 5px; 
 
width: 770px; 
 
} 
 
#thumbs a:link, #thumbs a:visited { 
 
width: 130px; 
 
height: 130px; 
 
border: 6px solid #555; 
 
margin: 6px; 
 
float: left; 
 
} 
 
#thumbs a:hover { 
 
border: 6px solid #888; 
 
}

<html> 
 
<head> 
 
<title>Photo Gallery</title> 
 
<link rel="stylesheet" type="text/css" href="style.css"/> 
 
</head> 
 
<body> 
 
<div id="gallery"> 
 

 
    <div id="bigimages"> 
 
     <div id="normal1"> 
 
      <img src="http://placehold.it/750x100?text=1" alt=""/> 
 
     </div> 
 

 
     <div id="normal2"> 
 
      <img src="http://placehold.it/750x100?text=2" alt=""/> 
 
     </div> 
 

 
     <div id="normal3"> 
 
      <img src="http://placehold.it/750x100?text=3" alt=""/> 
 
     </div> 
 

 
     <div id="normal4"> 
 
      <img src="http://placehold.it/750x100?text=4" alt=""/> 
 
     </div> 
 

 
     <div id="normal5"> 
 
      <img src="http://placehold.it/750x100?text=5" alt=""/> 
 
     </div> 
 

 
     <div id="normal6"> 
 
      <img src="http://placehold.it/750x100?text=6" alt=""/> 
 
     </div> 
 

 
     <div id="normal7"> 
 
      <img src="http://placehold.it/750x100?text=7" alt=""/> 
 
     </div> 
 

 
    </div> 
 

 
    <div id="thumbs"> 
 
     <div id="container"> 
 
      <a href="javascript: changeImage(1);"><img src="http://placehold.it/200x200?text=1" alt="" border="0" /></a> 
 
      <a href="javascript: changeImage(2);"><img src="http://placehold.it/200x200?text=2" alt="" /></a> 
 
      <a href="javascript: changeImage(3);"><img src="http://placehold.it/200x200?text=3" alt="" /></a> 
 
      <a href="javascript: changeImage(4);"><img src="http://placehold.it/200x200?text=4" alt="" /></a> 
 
      <a href="javascript: changeImage(5);"><img src="http://placehold.it/200x200?text=5" alt="" /></a> 
 
      <a href="javascript: changeImage(6);"><img src="http://placehold.it/200x200?text=6" alt="" /></a> 
 
      <a href="javascript: changeImage(7);"><img src="http://placehold.it/200x200?text=7" alt="" /></a> 
 
     </div> 
 
    </div> 
 
</div>

來源

2015-08-31 16:08:26

帕特·卡恩斯，太謝謝你了。它效果很好！ – Nargis

嗨，我試圖通過隱藏容器並添加左右鏈接/按鈕來修改代碼，但無法使其工作。 – Nargis

如何滾動到照片庫上的下一個縮略圖圖像

回答

相關問題