javascript - 如何滚动到照片库中的下一个缩略图-6ren

javascript - 如何滚动到照片库中的下一个缩略图

转载作者：行者123 更新时间：2023-11-28 07:16:44

我找到了一个代码，可以用来在我的网页上创建一个照片库。这是标准的点击缩略图查看大图功能。它对我来说很好用。唯一的问题是我在向它添加滚动到下一个缩略图功能时遇到了麻烦。当前代码仅显示 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>`

谢谢。

最佳答案

您可以在#thumbs div 中创建另一个容器，其宽度足以容纳一行中所需的所有缩略图，然后将#thumbs div overflow 设置为滚动，这样超出宽度的缩略图图库隐藏，直到滚动到。

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>

关于javascript - 如何滚动到照片库中的下一个缩略图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32314859/

文章推荐： c++ - 左值函数如何在 C++ 中工作？

文章推荐： c++ - 文件 I/O 未读入任何内容

文章推荐： javascript - GreenSock，补间函数参数

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何滚动到照片库中的下一个缩略图