用Javascript制作簡單的圖像幻燈片
[英]Making a simple image slideshow in Javascript
問題描述
我正在嘗試使用Javascript制作圖像幻燈片，我將發布整個代碼使其清晰起來。我正在制作圖像幻燈片，當按下按鈕時應該交換圖像。
<!DOCTYPE HTML>
<html>
<head>
<!--The 6th page in the learning process-->
<title>
T6
</title>
<style>
button#prev{
margin-left:45%;
}
button{
letter-spacing: 3px;
font-weight: 700;
}
#mainImg{
height:480px;
width:640px;
margin-left:24%;
border:8px outset;
}
</style>
<script>
//This pre-loads the images.
//This creates the image array.
var imag=[];
for (var i=0; i<4; i++) {
//This makes four new image objects in the imag array.
imag[imag.length]=new Image();
};
//This provides the image URL.
imag[0].src="file:///D:/Sites/T6/1.jpg";
imag[1].src="file:///D:/Sites/T6/2.jpg";
imag[2].src="file:///D:/Sites/T6/3.jpg";
imag[3].src="file:///D:/Sites/T6/4.jpg";
//This creates the variable responsible for change.
//The variable is global so that both functions can access it.
var Chng=-1;
//Chng variable is initialized at -1 so that it complies with the array indexes.
//This is the function that shows the previous image.
//It is invoked by the #prev button.
function PrevFnc(){
switch(Chng){
//This makes sure that the variable will loop from 0 to 4.
//If the Chng variable becomes -1, this statement makes it 3 again.
case -1:
Chng=3;
break;
default:
Chng--;
break;
//This changes the src of the #mainImg to the src of the current image object.
document.getElementById("mainImg").src=imag[Chng].src;
}
}
function NextFnc(){
switch(Chng){
//This makes sure that the variable will loop from 0 to 4.
//If the Chng variable becomes 4, this statement makes it 0 again.
case 4:
Chng=0;
break;
default:
Chng++;
break;
//This changes the src of the #mainImg to the src of the current image object.
document.getElementById("mainImg").src=imag[Chng].src;
}
}
</script>
</head>
<body>
<div id="wrapper">
<img id="mainImg" src="">
</div>
<!--These are for next and previous.-->
<button id="prev" onclick="PrevFnc()"><==</button>
<button id="next" onclick="NextFnc()">==></button>
</body>
</html>
問題是單擊按鈕時什么也沒發生。我也搜索了另一個這樣的帖子，但它們包含明顯的錯誤。我不知道這段代碼有什么問題。 代碼中包含提供詳細信息的注釋。請告訴我我做錯了。
2 個解決方案
解決方案1
0 已采納 2014-07-19 13:54:57
我指出了代碼中的一些基本錯誤：
1.您必須將javaScript代碼保留在script標簽內
2.默認語句后，無論您在switch案例中編寫的內容將永遠不會被執行。
而已！！ 您的代碼現在可以正常運行了。
switch(val){
case 1:
// do your stuff
break;
case 2:
// do other stuff
break;
default :
// if you do nothing this will do rest
break;
//now whatever you do doesn't matter. It won't do anything
}
解決方案2
-1 2017-08-22 18:55:18
<head>
<title>Change image on click</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="image_one">
<img src="1.jpg" id="img_id" height="400px" width="200px">
</div>
<button type="button" onclick="myfxn()">Change Image</button>
<p id="para"></p>
<script>
var i = 1;
function myfxn(){
i++;
document.getElementById("para").innerHTML = i;
if(i<=5){
document.getElementById("img_id").src = i+".jpg";
}
else{
document.getElementById("para").innerHTML = "Click again to start from the beginning.";
i = 0;
}
}
</script>
</body>
使用JavaScript，CSS和HTML制作簡單的照片幻燈片
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.