尝试创建一个简单的 JavaScript 库，其中包含下一个和上一个按钮以循环回开头

Trying to create a simple javascript gallery with a next and previous buttons to loop back to the beginning

本文关键字：下一个 包含 上一个 按钮 开头 循环 创建 JavaScript 简单 一个      更新时间：2023-09-26

我是一个新的Javascript。我正在尝试创建一个带有下一个和上一个按钮的简单画廊，单击该按钮时会将这些图像循环到前面。我设法找到了一些教程和位来获取要点击的图像，但是我被困在我做错的地方。下一个/上一个按钮位于左上角，希望像上一个在左上角一样以缩略图图片为中心，下一个在缩略图的右上角。我去过当地的图书馆，但仍然无法弄清楚这一点。

我做错了什么以及如何纠正它？谢谢。

<html>
<head>
<link rel="stylesheet" type="text/css" href="test2.css">
<title>Simple Playing Around</title>
</head>
<script type="text/javascript">
 var photos=new Array()
 var which=0
 photos[0]='http://i67.tinypic.com/20uv0vp.png'
 photos[1]='http://i67.tinypic.com/20uv0vp.png'
 photos[2]='http://i67.tinypic.com/20uv0vp.png'
 photos[3]='http://i67.tinypic.com/20uv0vp.png'
 function backward(){
    if (which > 0){
        which=which-1
        document.images.photoslider.src=photos[which]
    }
 }   
      function backward(){
    if (which>0){
     which=which-1;
    } else {
     which=photos.length-1;
    }
    document.images.photoslider.src=photos[which];
 }
 function forward(){
    if (which<photos.length-1){
     which=which+1;
    } else {
     which=0;
    }
   document.images.photoslider.src=photos[which];
 }
 }
 </script>
 <form>
     <input type="button" value="&lt;&lt;Back" onClick="backward()"> 
     <input type="button" value="Next&gt;&gt;" onClick="forward()">
 </form>
<body>
<div class="gallery" align="center">
<h3>Thumbnails</h3>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" />
<img onmouseover="preview.src=img2.src" name="img2" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" />
<img onmouseover="preview.src=img3.src" name="img3" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" />
<img onmouseover="preview.src=img4.src" name="img4" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" />
<img onmouseover="preview.src=img5.src" name="img5" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" />
<img onmouseover="preview.src=img6.src" name="img6" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" />
<img onmouseover="preview.src=img7.src" name="img7" src="http://i67.tinypic.com/20uv0vp.png" alt="cat" />
</div>
<div class="preview" align="center">
<img name="preview" src="http://i67.tinypic.com/20uv0vp.png" alt=""/>
</div>
</div> 
</body>
</html>

试试这个

    function forward()
    {
        which++;
        if(which>photos.length-1)
        {
            which=0;
        }
        document.images.photoslider.src=photos[which];
    }
function backward()
{
    --which;
    if(which<1)
    {
        which=photos.length-1;
    }
    document.images.photoslider.src=photos[which];
}
相关文章：