網頁點擊圖片顯示下一張圖片

css javascript 網頁設計網頁 html

yugochen 2016-09-15 01:45:07 ‧ 22479 瀏覽

想請問有關網頁顯示圖片問題
,位置是,圖片1 圖片2 圖片3
一開始只顯示圖片1而且位置不變,圖片2和3都不顯示,
想要點擊圖片1時圖片2慢慢顯示,再點擊圖片2時圖片3慢慢顯示
請問是該用javascript寫嗎....該如何寫呢??謝謝

yugochen iT邦新手 5 級 ‧ 2016-09-15 02:24:52 檢舉

可能要用javascript寫想請問該如何做呢.....??

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

622

iT邦新手 5 級 ‧ 2016-09-18 17:44:42

最佳解答

<html>
<head>
<script>
x=1;
function change(){
  x++;
   document.getElementById("photo").src="25082015091922-000"+x+".jpg";
}
</script>
</head>
<body>
<img id="photo" src='25082015091922-0001.jpg' onclick="change()">
</body>
</html>

在開始時顯示25082015091922-0001.jpg
按圖片後會變成25082015091922-0002.jpg
再按會變成25082015091922-0003.jpg
如此類推..

回應 2
分享
檢舉

yugochen iT邦新手 5 級 ‧ 2016-09-19 10:01:54 檢舉

如果0002.jpg是要顯示在0001.jpg的旁邊而不是重疊呢？？0001.jpg也不能消失

622 iT邦新手 5 級 ‧ 2016-09-19 18:24:01 檢舉

<html>
<head>
<script>
x=1;
cache=""
function change(){
  x++;
  cache+="<img src='25082015091922-000"+x+".jpg'>"; 
  document.getElementById("photo").innerHTML=cache;
}
</script>
</head>
<body>
<div id="photo"></div>
<input type="button" value="show photo" onclick="change()">
</body>
</html>

登入發表回應