HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Simple Photo Slider</title> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 
    <link rel="stylesheet" type="text/css" href="css/main.css" /> 
</head> 
<body> 

    <div class="container"> 


     <!--Left Arrow--> 
     <div class="arrow"> 
      <a href="#" onclick="slide(-1)"> 
       <span class="left"></span> 
      </a> 
     </div> 

     <!--Image--> 
     <img src="images/img1.jpg" class="img" /> 

     <!--Right Arrow--> 
     <div class="arrow"> 
      <a href="#" onclick="slide(1)"> 
       <span class="right"></span> 
      </a> 
     </div> 



    </div> 
    <script src="js/index.js"></script>  
</body> 
</html>

JS：

var imageCount = 1; 
var total = 5; 
function slide(x) 
{ 
    var image = document.getElementsByClassName('img'); 
    imageCount += x; 
    if (imageCount > total || imageCount < 1) 
     imageCount = 1; 
    image.src = "images/img" + imageCount + ".jpg"; 
}

CSS：

.container { 
    width:700px; 
    height:600px; 
    margin: 20px auto; 
    position:relative; 
} 

.arrow { 
    display: inline-block; 
    vertical-align: middle; 
    position:absolute; 
    top:40%; 
    width:3em; 
} 



a { 
    display: inline-block; 
    border-radius: 50%; 
    text-align:center; 
} 

a:hover .left, a:hover .top, a:hover .bottom, a:hover .right{ 
    border: 0.3em solid #e74c3c; 
} 

a:hover .left:after, a:hover .top:after, a:hover .bottom:after, a:hover .right:after { 
    border-top: 0.3em solid #e74c3c; 
    border-right: 0.3em solid #e74c3c; 
} 

.left { 
    display: inline-block; 
    width: 3em; 
    height: 3em; 
    border: 0.3em solid #333; 
    border-radius: 50%; 
    /* margin-right: -3.5em; */ 
    /* margin-left: 0em; */ 
    /* margin: auto 0; */ 
} 

.left:after { 
    content: ''; 
    display: inline-block; 
    margin-top: 0.7em; 
    margin-left: 0.6em; 
    width: 1.4em; 
    height: 1.4em; 
    border-top: 0.3em solid #333; 
    border-right: 0.3em solid #333; 
    -moz-transform: rotate(-135deg); 
    -webkit-transform: rotate(-135deg); 
    transform: rotate(-135deg); 
} 

.right { 
    display: inline-block; 
    width: 3em; 
    height: 3em; 
    border: 0.3em solid #333; 
    border-radius: 50%; 
    margin-left: 40.1em; 
} 

.right:after { 
    content: ''; 
    display: inline-block; 
    margin-top: 0.7em; 
    margin-left: -0.6em; 
    width: 1.4em; 
    height: 1.4em; 
    border-top: 0.3em solid #333; 
    border-right: 0.3em solid #333; 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 


.img { 
    height:500px; 
    width:500px; 
    display:inline-block; 
    position:absolute; 
    left:14%; 

}

我怎樣才能使它發揮作用？我做錯了什麼？

來源

2016-03-21 EVH671

'document.getElementsByClassName（）'返回元素集合* *。因此，'image.src'將失敗，因爲元素集合不公開'src'屬性。 –

document.getElementsByClassName返回一個數組，所以你應該寫：

image[0].src = "images/img" + imageCount + ".jpg";

CodePen

來源

2016-03-21 14:34:39 bugyt

'image [0]'中的'0'不應該是一個變量，因爲每次點擊時您將不得不訪問數組中的不同圖像？ – hungerstar

如果您的網頁上只有一個圖片，其類別爲「img」，則它將始終爲0. – bugyt

但他正在製作圖片滑塊，該示例有一張幻燈片，但我相信未來會有更多。否則，如果只有一張幻燈片，_prev_和_next_按鈕有什麼意義？ – hungerstar

更改此行

var image = document.getElementsByClassName('img')[0];

由於document.getElementsByClassName('img')返回你需要這個集合中引用的第一個項目的集合，這是用[0]完成的。這個系列是類似於數組，但也有一些區別 - see here if interested

此外，作爲一個html頁面只能有一個ID，如果設置了圖像的id到img那麼你可以簡單地做：

<img src="images/img1.jpg" id="img" />

你可以做

var image = document.getElementById('img');

來源

2016-03-21 14:36:30

訪問數組應該通過引用數組中正確索引的變量來完成，而不是硬編碼的'0'應該不是？ – hungerstar

@hungerstar你能詳細說明一下嗎？由於只有一個類名爲「img」的元素，因此總是可以通過'[0]'來訪問。也許我想念你的意思，但請解釋，因爲我渴望學習 –

傻了，我忘了我們正在改變這個滑塊的'src'屬性，對不起。我在腦海中會有像大多數滑塊一樣的額外'img'標記。 – hungerstar

我的href onclick事件不起作用

HTML：

JS：

CSS：

回答

CodePen

相關問題