層疊圖片,圖片切換效果
阿新 • • 發佈：2019-02-11
*/
var id = setInterval(changeImg, 1000);
var div = document.getElementById("div");
div.onmouseover = function(){
clearInterval(id);
id = null;
}
div.onmouseout = function(){
if(id == null) // 為了避免在沒有經過onmouseover事件的時候先進入onmouseout, 這樣會開啟2個計時器
id = setInterval(changeImg, 1000);
}
}
//獲取所有圖片,將所有隱藏
//顯示其中一個
var times = 0;
function changeImg(){
var imagesArr = document.images;
for(var x = 0; x < 4; x++)
imagesArr[x].style.display = "none";
imagesArr[++times % 4].style.display = "block";
}
function showImg(index){
var imgArr = document.images;
for (var x = 0; x < 4; x++)
imgArr[x].style.display = "none";
imgArr[index].style.display = "block";
}
</script>
</head>
<body>
<div id="div">
<img src="../img/唐笑.jpg" style="display:block">
<img src="../img/杜德偉.jpg">
<img src="../img/林俊杰.jpg">
<img src="../img/蕭亞軒.jpg">
<div style=" position:absolute; z-index:1; margin-left:210px; margin-top:290px" >
<img src="../img/1.JPG" onclick="showImg(0)">
<img src="../img/2.JPG" onclick="showImg(1)">
<img src="../img/3.JPG" onclick="showImg(2)">
<img src="../img/4.JPG" onclick="showImg(3)">
</div>
</div>
</body>
</html>
var id = setInterval(changeImg, 1000);
var div = document.getElementById("div");
div.onmouseover = function(){
clearInterval(id);
id = null;
}
div.onmouseout = function(){
if(id == null) // 為了避免在沒有經過onmouseover事件的時候先進入onmouseout, 這樣會開啟2個計時器
id = setInterval(changeImg, 1000);
}
}
//獲取所有圖片,將所有隱藏
//顯示其中一個
var times = 0;
function changeImg(){
var imagesArr = document.images;
for(var x = 0; x < 4; x++)
imagesArr[x].style.display = "none";
imagesArr[++times % 4].style.display = "block";
}
function showImg(index){
var imgArr = document.images;
for (var x = 0; x < 4; x++)
imgArr[x].style.display = "none";
imgArr[index].style.display = "block";
}
</script>
</head>
<body>
<div id="div">
<img src="../img/唐笑.jpg" style="display:block">
<img src="../img/杜德偉.jpg">
<img src="../img/林俊杰.jpg">
<img src="../img/蕭亞軒.jpg">
<div style=" position:absolute; z-index:1; margin-left:210px; margin-top:290px" >
<img src="../img/1.JPG" onclick="showImg(0)">
<img src="../img/2.JPG" onclick="showImg(1)">
<img src="../img/3.JPG" onclick="showImg(2)">
<img src="../img/4.JPG" onclick="showImg(3)">
</div>
</div>
</body>
</html>