点击上一个下一个按钮改变图像

问题描述 投票：0回答：1

我试图通过点击按钮来改变div中的图片，就像 "旋转木马 "一样，但无法完成，代码也没有出现任何错误。 我还不明白我做错了什么。

我调用java脚本函数 "setIndex "点击时，参数+1或-1。在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个回答
0
投票

我认为这个代码会更好。

    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>
-1
投票

问题是你的a href="""使页面刷新，所以只是看不改变！在has中添加 "#"，如&&。

添加 "#"在href中像<a 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，而不是tab，如何使用document.getElementById('slideImage')？

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

或者就像你之前用的那样，用sideImage?

最后

试着使用Array来保存你的图片，并使用变量来保存你的对象!

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];
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.