與頁碼幻燈片javascript

我已經創建幻燈片。我想添加一些頁碼的描述。我試圖添加函數sliderText（）來獲得結果 - 「Image 1 of 7」等。與頁碼幻燈片javascript

我不知道這裏出了什麼問題。有人可以給我一些提示嗎？

謝謝你在前進，鮎魚

var img_index = 0; 
 
var imgs = [ 
 
    "assets/1.jpg", 
 
    "assets/2.jpg", 
 
    "assets/3.jpg", 
 
    "assets/4.jpg", 
 
    "assets/5.jpg", 
 
    "assets/6.jpg", 
 
    "assets/7.jpg" 
 

 
]; 
 

 

 
function findNextImage(isPrev) { 
 
    switch (true) { 
 
    case !!(isPrev && imgs[img_index + 1]): 
 
     img_index += 1 
 
     return imgs[img_index] 
 

 
    case !!imgs[img_index + 1]: 
 
     img_index += 1 
 
     return imgs[img_index] 
 

 
    default: 
 
     img_index = 0 
 
     return imgs[img_index] 
 

 
    } 
 

 
    sliderText() 
 
} 
 

 

 

 
function checkKey(event) { 
 
    if (event.keyCode == '39') { 
 
    document.getElementById("images").src = findNextImage(); 
 
    
 
    } else if (event.keyCode == '37') { 
 
    document.getElementById("images").src = findNextImage(true); 
 
    } 
 

 
} 
 

 
document.onkeydown = checkKey; 
 

 

 

 

 

 
function sliderText() { 
 
    var text = document.getElementsByClassName("slideshow_text"); 
 
    var imageNumber = img_index + 1; 
 
    text.innerHTML = "image " + imageNumber + " of " + imgs.length; 
 

 
}

<!DOCTYPE html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>test</title> 
 
</head> 
 
<h1 class="slideshow_text">Image 1 of 7</h1> 
 
<img id="images" src="assets/1.jpg" /> 
 

 

 
<body> 
 

 
</body> 
 
<script src="test.js"></script> 
 

 
</html>

來源

2017-07-15 Magdalena Dering

一些修改，以提高代碼質量

我刪除findNextImage這是不是一個純粹的功能，並介紹findNextImageIndex改爲： findNextImageIndex既不訪問也不修改任何外部va riables，因此更易於閱讀。 sliderText將imgIndex作爲參數，以便您可以輕鬆查看設置文本所需的參數。

此外建議

考慮Image 1 of 7和"assets/1.jpg"從HTML移動預先設定的值，以JavaScript的爲好。初始化滑塊"assets/1.jpg"從陣列中取出，並在初始時調用sliderText(state.imgIndex);。

請注意，我將<body>中的幻燈片放映HTML移到了有效的HTML中。

修改後的代碼

var state = { 
 
    imgIndex: 0 
 
}; 
 
var imgs = [ 
 
    "assets/1.jpg", 
 
    "assets/2.jpg", 
 
    "assets/3.jpg", 
 
    "assets/4.jpg", 
 
    "assets/5.jpg", 
 
    "assets/6.jpg", 
 
    "assets/7.jpg" 
 
]; 
 

 
function findNextImageIndex(imgIndex, isPrev) { 
 
    if(isPrev) { 
 
    if(imgIndex <= 0) { 
 
     return imgs.length - 1; 
 
    } else { 
 
     return imgIndex - 1; 
 
    } 
 
    } else { 
 
    if(imgIndex >= imgs.length - 1) { 
 
     return 0; 
 
    } else { 
 
     return imgIndex + 1; 
 
    } 
 
    } 
 
} 
 

 
function sliderText(imgIndex) { 
 
    var text = document.getElementsByClassName("slideshow_text")[0]; 
 
    var imageNumber = imgIndex + 1; 
 
    text.innerHTML = "image " + imageNumber + " of " + imgs.length; 
 
} 
 

 
function goToNextImage(isPrev) { 
 
    state.imgIndex = findNextImageIndex(state.imgIndex, isPrev); 
 
    document.getElementById("images").src = imgs[state.imgIndex]; 
 
    sliderText(state.imgIndex); 
 
} 
 

 
function checkKey(event) { 
 
    switch(event.keyCode) { 
 
    case 37: goToNextImage(true); break; 
 
    case 39: goToNextImage(false); break; 
 
    } 
 
} 
 

 
document.onkeydown = checkKey;

<!DOCTYPE html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>test</title> 
 
</head> 
 

 
<body> 
 
    <h1 class="slideshow_text">Image 1 of 7</h1> 
 
    <img id="images" src="assets/1.jpg" /> 
 
    <script src="test.js"></script> 
 
</body> 
 

 
</html>

來源

2017-07-15 16:43:07 ideaboxer

與頁碼幻燈片javascript

回答

相關問題