通过单击上一个/下一个按钮更改图像答案

【问题标题】：change image by click prev/next button通过单击上一个/下一个按钮更改图像
【发布时间】：2020-09-21 17:25:00
【问题描述】：

我正在尝试通过单击“轮播”等按钮来更改“div”中的图像，但无法完成并且代码不会引发任何错误。我还不明白我做错了什么。

我在点击参数 +1 或 -1 时调用 java 脚本函数“setIndex”。在java代码中我只是根据需要更改图像源，然后简单地将 display='block' 放在图像源之后。

但是主题不工作并且不改变图像。

请帮忙。

我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>prev_next#</title>
</head>
<style>
    .divContainer{
        width: 85%;
        margin: auto;
        overflow: hidden;
    }
    #Middle{
        min-height: 460px;
    }
    #divMiddle{
        width: 90%;
        margin: auto;
        border: 2px red solid; 
        overflow: hidden;
        max-height: 460px;
    } 
    #divSlides{
        float: left;
        width: 100%;
        max-height: 455px;
    }   
    #slideImage{
        height: 494px;
        width: 100%;
        margin: auto;
    }
    .alink-left, .alink-right{
        position: absolute;
        top:30%;
        width: auto;
        margin-top: 22px;
        font-size: 40px;
        color:red;
        border:none;
        user-select: none;
        border-radius: 3px 0 0 3px;
        text-decoration: none;
    }
    .alink-left{
       color:yellow;
       left:0;
       margin-left: 10%;    
    }
    .alink-right{
        color:red;
        right: 90px;
    }
</style>
<body>  
    <section id='Middle'>
        <div class="divContainer" id="divMiddle">
            <div id="divSlides">
                <img id="slideImage" src="../html-web/img/it-slide01.jpg">
                <a class="alink-left"   href="" onclick="setIndex(-1)"> < </a>
                <a class="alink-right"  href="" onclick="setIndex(+1)"> > </a>
            </div>
        </div>
    </section>
</body>
<script>
    var imageNo= 1;
    var ImageSource="";

    function setIndex(idx) {
        imageNo = imageNo + idx ;
        alert(imageNo)
        switch(imageNo){
            case 1:
              slideImage.display='none';
              ImageSource='../html-web/img/it-slide01.jpg';
              break;
            case 2:
              alert('case 2')
              slideImage.display='none';
              ImageSource='../html-web/img/it-slide02.jpg';
              break;
            case 3:
              slideImage.display='none';
              ImageSource='../html-web/img/it-slide03.jpg';
              break;
            case 4:
              slideImage.display='none';
              ImageSource='../html-web/img/it-slide04.jpg';
              break;
            case 5:
              slideImage.display='none';
              ImageSource= '../html-web/img/it-slide05.jpg';
              break;
            case 6:
              slideImage.display='none';
              ImageSource= '../html-web/img/it-slide06.jpg';
              break;  
            default:
              slideImage.display='none';
              ImageSource='../html-web/img/it-slide01.jpg';
              if(imageNo>=6||imageNo<=1){imageNo=1}
              break;
        }  // switch
            document.getElementsByTagName('slideImage').display='block';
            document.getElementsByTagName('slideImage').src = ImageSource;
            //slideImage.display='block';
            //slideImage.src = ImageSource;
    } //function setIndex   
</script>
</html>

【问题讨论】：

标签： javascript css slide

【解决方案1】：

我认为这段代码会更好。

    var imageNo= 1
    var ImageSources=[
      '../html-web/img/it-slide01.jpg',
      '../html-web/img/it-slide02.jpg',
      '../html-web/img/it-slide03.jpg',
      '../html-web/img/it-slide04.jpg',
      '../html-web/img/it-slide05.jpg',
      '../html-web/img/it-slide06.jpg'
    ]

    function setIndex(idx) {
        imageNo = (imageNo + idx)%6
        console.log(imageNo)
        document.getElementById('slideImage').src = ImageSources[imageNo];
    } //function setIndex

    .divContainer{
        width: 85%;
        margin: auto;
        overflow: hidden;
    }
    #Middle{
        min-height: 460px;
    }
    #divMiddle{
        width: 90%;
        margin: auto;
        border: 2px red solid; 
        overflow: hidden;
        max-height: 460px;
    } 
    #divSlides{
        float: left;
        width: 100%;
        max-height: 455px;
    }   
    #slideImage{
        height: 494px;
        width: 100%;
        margin: auto;
    }
    .alink-left, .alink-right{
        position: absolute;
        top:30%;
        width: auto;
        margin-top: 22px;
        font-size: 40px;
        color:red;
        border:none;
        user-select: none;
        border-radius: 3px 0 0 3px;
        text-decoration: none;
    }
    .alink-left{
       color:yellow;
       left:0;
       margin-left: 10%;    
    }
    .alink-right{
        color:red;
        right: 90px;
    }

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>prev_next#</title>
</head>
<style>
    .divContainer{
        width: 85%;
        margin: auto;
        overflow: hidden;
    }
    #Middle{
        min-height: 460px;
    }
    #divMiddle{
        width: 90%;
        margin: auto;
        border: 2px red solid; 
        overflow: hidden;
        max-height: 460px;
    } 
    #divSlides{
        float: left;
        width: 100%;
        max-height: 455px;
    }   
    #slideImage{
        height: 494px;
        width: 100%;
        margin: auto;
    }
    .alink-left, .alink-right{
        position: absolute;
        top:30%;
        width: auto;
        margin-top: 22px;
        font-size: 40px;
        color:red;
        border:none;
        user-select: none;
        border-radius: 3px 0 0 3px;
        text-decoration: none;
    }
    .alink-left{
       color:yellow;
       left:0;
       margin-left: 10%;    
    }
    .alink-right{
        color:red;
        right: 90px;
    }
</style>
<body>  
    <section id='Middle'>
        <div class="divContainer" id="divMiddle">
            <div id="divSlides">
                <img id="slideImage" src="../html-web/img/it-slide01.jpg">
                <a class="alink-left"   href="#" onclick="setIndex(-1)"> < </a>
                <a class="alink-right"  href="#" onclick="setIndex(1)"> > </a>
            </div>
        </div>
    </section>
</body>

</html>

【讨论】：

谢谢。你的java脚本代码很专业。简而言之，你做得非常好。非常感谢。希望再次在我的帖子中见到你。
没问题。不要忘记将我的答案视为已接受；）

【解决方案2】：

问题是你的 a href="" 让页面刷新，所以只是看起来没有改变！

像一样在href中加“#”，你的代码就可以工作了！

看看下面，检查“你已经做对了！”在js中。

var imageNo= 1;
    var ImageSource="";
    var slideImage = document.getElementById('slideImage');
    function setIndex(idx) {
        imageNo = imageNo + idx ;
        switch(imageNo){
            case 1:
              slideImage.display='none';
              ImageSource='https://picsum.photos/100/100/?random=1';
              break;
            case 2:
              slideImage.display='none';
              ImageSource='https://picsum.photos/100/100/?random=2';
              break;
            case 3:
              slideImage.display='none';
              ImageSource='https://picsum.photos/100/100/?random=3';
              break;
            case 4:
              slideImage.display='none';
              ImageSource='https://picsum.photos/100/100/?random=4';
              break;
            case 5:
              slideImage.display='none';
              ImageSource= 'https://picsum.photos/100/100/?random=5';
              break;
            case 6:
              slideImage.display='none';
              ImageSource= 'https://picsum.photos/100/100/?random=6';
              break;  
            default:
              slideImage.display='none';
              ImageSource='https://picsum.photos/100/100/?random=7';
              if(imageNo>=6||imageNo<=1){imageNo=1}
              break;
        }  // switch
        //=====================================
        
        //your doing right already!
            //           document.getElementsByTagName('slideImage').display='block';
            // document.getElementsByTagName('slideImage').src = ImageSource;
            slideImage.display='block';  // <=
            slideImage.src = ImageSource; // <=
        //==========================
    } //function setIndex

.divContainer{
        width: 85%;
        margin: auto;
        overflow: hidden;
    }
    #Middle{
        min-height: 460px;
    }
    #divMiddle{
        width: 90%;
        margin: auto;
        border: 2px red solid; 
        overflow: hidden;
        max-height: 460px;
    } 
    #divSlides{
        float: left;
        width: 100%;
        max-height: 455px;
    }   
    #slideImage{
        height: 494px;
        width: 100%;
        margin: auto;
    }
    .alink-left, .alink-right{
        position: absolute;
        top:30%;
        width: auto;
        margin-top: 22px;
        font-size: 40px;
        color:red;
        border:none;
        user-select: none;
        border-radius: 3px 0 0 3px;
        text-decoration: none;
    }
    .alink-left{
       color:yellow;
       left:0;
       margin-left: 10%;    
    }
    .alink-right{
        color:red;
        right: 90px;
    }

<section id='Middle'>
        <div class="divContainer" id="divMiddle">
            <div id="divSlides">
                <img id="slideImage" src="https://picsum.photos/100/100/?random=1">
                <a class="alink-left"   href="#" onclick="setIndex(-1)"> < </a>
                <a class="alink-right"  href="#" onclick="setIndex(+1)"> > </a>
            </div>
        </div>
    </section>

=================================

然后

document.getElementsByTagName('slideImage')

返回数组，'slideImage' 是您的 html 上的 ID，而不是选项卡。

document.getElementById('slideImage') 怎么样？

或者只使用slideImage？就像你以前用过的一样。

终于

尝试使用数组来保存图像并使用变量来保存对象！

var imageNo= 0;
var slideImage = document.getElementById('slideImage');
function setIndex(idx) {
    imageNo = imageNo + idx ;
    alert(imageNo)
    let imagesArray = [ 'https://picsum.photos/100/100/?random=0',
                        'https://picsum.photos/100/100/?random=1',
                        'https://picsum.photos/100/100/?random=2',
                        'https://picsum.photos/100/100/?random=3',
                        'https://picsum.photos/100/100/?random=4',
                        'https://picsum.photos/100/100/?random=5',
                        'https://picsum.photos/100/100/?random=6'];

    slideImage.src = imagesArray[Math.abs(imageNo) % imagesArray.length];
}

【讨论】：

非常感谢先生。有效！。你的把戏“在 href 中添加“#”，比如 " 对我来说非常棒，因为我还是个新手。你的表达方式很好，任何人都能理解。
stackoverflow.com/questions/7755088/… 推荐阅读这篇，更好的解决方案。但大多数情况下，'#' 可以而且很快！