0
작은 슬라이더를 만들려고 시도하지만 Chrome에서만 작동합니다.CSS 슬라이더가 FireFox에서 작동하지 않습니다.
FireFox (버전 47)에서는 작동하지 않습니다.
CSS 파일은 그 :
#home-container {
width: 500px;
height: 300px;
background-image: url("img1.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
과 (약간 스크립트)를 HTML :
이<!DOCTYPE html>
<html>
<head>
<title>CSS Slider</title>
<link rel="stylesheet" href="style.css"/>
<script>
var index = 0;
function changeImage() {
var imgArr = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
document.getElementById("home-container").style.backgroundImage = "url('" + imgArr[index] + "')";
index++;
if (index >= imgArr.length) {
index = 0;
}
}
setInterval(changeImage, 2000);
</script>
</head>
<body>
<div id="home-container">
</div>
</body>
</html>
PS : 그 코드에 대한 솔루션을 필요로하지 대안이 jQuery를 사용하는 .
작동하지 않는다고 말하면 어떻게됩니까? 오류가 있습니까? 예기치 않은 행동입니까? @Door – Mark
행동은 무엇이되어야하는 것이 아닙니다. 예를 들어 Chrome에서는 이미지가 슬라이드 효과로 변경되지만 Firefox에서는 즉시 효과가 변경됩니다. – Doro