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

Question

我找到了用於在網頁上創建照片庫的代碼。 這是標准的單擊縮略圖以查看大照片功能。 對我來說很好。 唯一的問題是，我無法在其中添加滾動到下一個縮略圖功能。 當前代碼僅顯示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>`

謝謝。

Answer 1

您可以在#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>

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

問題描述

1 個解決方案

解決方案1
0 已采納 2015-08-31 16:08:26

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

問題描述

1 個解決方案

解決方案1 0 已采納 2015-08-31 16:08:26

解決方案1
0 已采納 2015-08-31 16:08:26