このHTML/JavaScriptスライドショーは、すべての画像で変化しないのはなぜですか？

私は小さなギャラリー/スライドショーページを書いています。そのページは、左右の矢印キーを使って画像を変える必要があります。現在のところ、コードは多少は機能しますが、すべての画像で変更されるわけではありません。どうしてこれなの？どのように修正することができますか？サンプルテストのためのこのHTML/JavaScriptスライドショーは、すべての画像で変化しないのはなぜですか？

画像：

[ 
    'http://i.imgur.com/co6MlSo.jpg', 
    'http://i.imgur.com/gCxcOKi.jpg', 
    'http://i.imgur.com/lsu7ZSw.jpg', 
    'http://i.imgur.com/pwysNhX.jpg' 
];

コード：

<html> 
<head> 
<title>gallery</title> 
<style type="text/css"> 
    html, body{ 
     background: #333333; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     font-family: Arial Black; 
     font-size: 18px; 
     line-height: 1.5; 
     text-align: justify; 
    } 
    img{ 
     padding: 0; 
     display: block; 
     margin: 0 auto; 
     max-height: 100%; 
     max-width: 100%; 
    } 
</style> 
</head> 
<body> 
<div class="container"> 
    <div id="slideshow"> 
     <img 
      alt="slideshow" 
      src="co6MlSo.jpg" 
      id="imgClickAndChange" 
      onclick="changeImage()" 
     /> 
    </div> 
</div> 
<script> 
    var images = [ 
     "co6MlSo.jpg", 
     "gCxcOKi.jpg", 
     "lsu7ZSw.jpg", 
     "pwysNhX.jpg" 
    ]; 

    function changeImage(dir){ 
     var img = document.getElementById("imgClickAndChange"); 
     img.src = images[images.indexOf(img.src) + (dir || 1)] || images[dir ? images.length - 1 : 0]; 
    } 

    document.onkeydown = function(e){ 
     e = e || window.event; 
     if (e.keyCode == '37'){ 
      changeImage(-1) // left to display previous image 
     }else if (e.keyCode == '39'){ 
      // right to display next image 
      changeImage() 
     } 
    } 
</script> 
</body> 
</html>

出典

2016-12-17 d3pd

私はonclickのクリックの代わりに、インラインでのjQueryを使用します。私がうまくいけば、パラメータのない呼び出しのためにcheckImageが定義されていないというエラーが出ます。 jQueryを使用する場合、条件付きロジックを使用できます。 – yardpenalty

お好きな条件を追加することができます。

if(dir=='next'){ 
    index++; 
}else{ 
    index--; 
} 

if(index>images_length){ 
    index=0; 
}else if(index<0){ 
    index=images_length; 
} 

img.src = images[index];

は、この情報がお役に立てば幸いです。

var images = ["http://i.imgur.com/co6MlSo.jpg","http://i.imgur.com/gCxcOKi.jpg","http://i.imgur.com/lsu7ZSw.jpg","http://i.imgur.com/pwysNhX.jpg"]; 
 
var index = 0; 
 
var images_length = images.length-1; 
 

 
function changeImage(dir){ 
 
    var img = document.getElementById("imgClickAndChange"); 
 

 
    if(dir=='next'){ 
 
    index++; 
 
    }else{ 
 
    index--; 
 
    } 
 

 
    if(index>images_length){ 
 
    index=0; 
 
    }else if(index<0){ 
 
    index=images_length; 
 
    } 
 

 
    img.src = images[index]; 
 
} 
 

 
document.onkeydown = function(e){ 
 
    e = e || window.event; 
 

 
    if (e.keyCode == '37'){ 
 
    changeImage('prev'); 
 
    }else if (e.keyCode == '39'){ 
 
    changeImage('next'); 
 
    } 
 
}

html, body{ 
 
    background: #333333; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Arial Black; 
 
    font-size: 18px; 
 
    line-height: 1.5; 
 
    text-align: justify; 
 
} 
 
img{ 
 
    padding: 0; 
 
    display: block; 
 
    margin: 0 auto; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
}

<div class="container"> 
 
    <div id="slideshow"> 
 
    <img 
 
     alt="slideshow" 
 
     src="http://i.imgur.com/co6MlSo.jpg" 
 
     id="imgClickAndChange" 
 
     onclick="changeImage()" 
 
     /> 
 
    </div> 
 
</div>

出典

2016-12-17 12:37:51

このHTML/JavaScriptスライドショーは、すべての画像で変化しないのはなぜですか？

答えて

関連する問題