嗨我還是初學者在CSS,html和JS。我試圖爲剩下的財產做一個過渡緩解,因爲我爲未來的目的製作了一部動畫歌曲。我在瀏覽器中對它進行了測試,圖片發生了變化,但沒有發生過渡。CSS緩解/易插入轉換動畫
這裏是我的 「的index.html」:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="galery">
<img class="galery_comp" src="img/leaf.jpg">
<img class="galery_comp" src="img/spital.jpg">
<img class="galery_comp" src="img/nature.jpg">
<img class="galery_comp" src="img/forest.jpg">
</div>
<br>
<button type="button" id="back"><-- Back</button>
<button type="button" id="next">Next --></button>
<script src="Galery.js"></script>
<script src="sketch.js"></script>
</body>
</html>
這裏是我的 「style.css文件」:
div.galery{
display: flex;
transition: left 0.4s ease-out; /* This is where i tried */
}
img{
width: 600;
height: 500;
display: none;
}
這裏是我的 「Galery.js」:
function Galery(){
this.imgs = document.getElementsByClassName('galery_comp');
this.currentImage = 0;
this.offSet = 0;
var hide = false;
this.sleep = function(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
this.init = function(){
this.imgs[0].style.display = "block"
}
this.next = function(){
this.currentImage++;
if (this.currentImage >= this.imgs.length)
{
this.currentImage = 0;
for (var i = 0; i < this.imgs.length; i++){
this.imgs[i].style.left = 0;
this.imgs[i].style.display = "none";
}
}
this.imgs[this.currentImage].style.display = "inline";
this.offSet=0;
}
this.slideNext = function(){
this.imgs[this.currentImage].style.left = -parseInt(window.getComputedStyle(this.imgs[0], null).width) - this.offSet;
this.imgs[this.currentImage].style.display = "none";
this.offSet = 10;
this.next();
}
this.slideBack = function(){
if (this.currentImage === 0){
this.currentImage = this.imgs.length;
for (var i = 0; i < this.imgs.length; i++){
this.imgs[i].style.left = -parseInt(window.getComputedStyle(this.imgs[0], null).width);
this.imgs[i].style.display = "none";
}
}
this.currentImage--;
this.imgs[this.currentImage].style.display = "inline";
this.imgs[this.currentImage].style.left = 0;
if (this.currentImage + 1 < this.imgs.length)
this.imgs[this.currentImage + 1].style.display = "none";
}
}
最後這裏是我的sketch.js:
var galery = new Galery();
galery.init();
document.getElementById('next').addEventListener("click", function(){
galery.slideNext();
});
document.getElementById('back').addEventListener("click", function(){
galery.slideBack();
});
我做錯了什麼?或者我應該使用另一個技巧。如果你想測試它,你可以使用任何你想要的圖像和你想要的數量(只保留js的「galery_comp」類) 任何answear都可以!
https://stackoverflow.com/a/45267732/5068056 – aghilpro
爲了簡單起見,我建議你也許使用一個插件,做你所需要的。除非你想炫耀你的JavaScript技能。 :) – Bird
那麼你建議什麼插件? –