將過渡CSS添加到圖像滑塊

Question

我有一個帶有3個圖像和3個按鈕的滑塊，它們可以更改當前圖像的“ src”屬性（並因此更改當前圖像），但是現在我想在更改圖像時添加一個平滑過渡，我想使用CSS轉換。

因此，當我單擊任何項​​目符號時，我需要淡出當前圖像，然后淡入新圖像。我該怎么做？

 var listItemContainer = document.getElementById('carousel-index'); var imageChanger = document.getElementById('image-container').getElementsByTagName('img'); var bulletNumber; for (i = 0; i < listItemContainer.children.length; i++){ (function(index){ listItemContainer.children[i].onclick = function(){ bulletNumber = index; imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png'); } })(i); }; 

 body{ text-align:center; } #carousel-index{ margin:0; padding:0; } #carousel-index li { display: inline-block; width: 2em; height: 2em; border-radius: 100%; background-color: #666; cursor: pointer; } 

 <div id="image-container"> <img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/> <ul id="carousel-index"> <li></li> <li></li> <li></li> </ul> </div> 

這是一個CODEPEN

PD：我想在沒有Jquery的情況下執行此操作。

Answer 1

CodePen示例

我在CSS中添加了一些CSS過渡

div#image-container {
opacity:1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;     
transition: opacity 1s; 

}

div#image-container.fade {
opacity:0;
}

和一些處理事件的函數：

var image = document.getElementById('image-container');
  if(image.className === 'fade'){
    image.className = '';
    setTimeout(function(){
      image.className = 'fade';
    },1000)
  }else{
    image.className = 'fade';
    setTimeout(function(){
      image.className = '';
    },1000)
  }
  setTimeout(function(){
    bulletNumber = index;
 imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');   
  },1000);

Answer 2

在CSS中將CSS3動畫與添加類一起使用

 var listItemContainer = document.getElementById('carousel-index'); var imageChanger = document.getElementById('image-container').getElementsByTagName('img'); var bulletNumber; for (i = 0; i < listItemContainer.children.length; i++) { (function(index) { listItemContainer.children[i].onclick = function() { bulletNumber = index; imageChanger[0].className = "hide"; setTimeout(function(){ imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber + 1) + '.png'); },501); setTimeout(function(){ imageChanger[0].className = "show"; }, 1001); } })(i); }; 

 body { text-align: center; } #carousel-index { margin: 0; padding: 0; } #carousel-index li { display: inline-block; width: 2em; height: 2em; border-radius: 100%; background-color: #666; cursor: pointer; } #image-container img.show { animation: show .5s; animation-fill-mode: both; } @keyframes show { from { transform:scale(0.7); opacity:0 } to { transform: scale(1); opacity:1 } } #image-container img.hide { animation: hide .5s; animation-fill-mode: both; } @keyframes hide { from { transform:scale(1); opacity:1 } to { transform:scale(0.7); opacity:0 } } 

 <div id="image-container"> <img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png" /> <ul id="carousel-index"> <li></li> <li></li> <li></li> </ul> </div> 

Answer 3

您可以使用CSS過渡，我想所需的屬性是不透明度。

 var listItemContainer = document.getElementById('carousel-index'); var imageChanger = document.getElementById('image-container').getElementsByTagName('img'); var bulletNumber; imageChanger[0].classList.add('fadeIn'); for (i = 0; i < listItemContainer.children.length; i++){ (function(index){ listItemContainer.children[i].onclick = function(){ bulletNumber = index; imageChanger[0].classList.remove('fadeIn'); setTimeout(function(){ imageChanger[0].classList.add('fadeIn'); } , 100); imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png'); } })(i); }; 

 body{ text-align:center; } #carousel-index{ margin:0; padding:0; } #carousel-index li { display: inline-block; width: 2em; height: 2em; border-radius: 100%; background-color: #666; cursor: pointer; } img { opacity:0; } img.fadeIn { opacity:1; transition:opacity 0.5s ease; } 

 <div id="image-container"> <img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/> <ul id="carousel-index"> <li></li> <li></li> <li></li> </ul> </div> 

當然，開始圖像的不透明度應該為0：

img {
  opacity:0;
}
img.fadeIn {
  opacity:1;
  transition:opacity 0.5s ease;
}

然后，單擊（刪除添加的類->再次將不透明度設置為0），然后再次添加它。 您可以使用值來獲得想要的效果。

編輯：fadeOut / fadeIn ...有點棘手，因為一個容器和img src更改，但是額外的超時解決了它：

 var listItemContainer = document.getElementById('carousel-index'); var imageChanger = document.getElementById('image-container').getElementsByTagName('img'); var bulletNumber; imageChanger[0].classList.add('fadeIn'); for (i = 0; i < listItemContainer.children.length; i++){ (function(index){ listItemContainer.children[i].onclick = function(){ bulletNumber = index; imageChanger[0].classList.remove('fadeIn'); imageChanger[0].classList.add('fadeOut'); setTimeout(function(){ imageChanger[0].classList.add('fadeIn'); imageChanger[0].classList.remove('fadeOut'); } , 1000); setTimeout(function(){ imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png'); } , 1000); } })(i); }; 

 body{ text-align:center; } #carousel-index{ margin:0; padding:0; } #carousel-index li { display: inline-block; width: 2em; height: 2em; border-radius: 100%; background-color: #666; cursor: pointer; } img { opacity:0; } img.fadeIn { opacity:1; transition:opacity 0.5s ease; } img.fadeOut { opacity:0; transition:opacity 0.5s ease; } 

 <div id="image-container"> <img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/> <ul id="carousel-index"> <li></li> <li></li> <li></li> </ul> </div> 

PS映像可能應該預先加載，以便在首次加載時一切正常。

Answer 4

另一種替代方法，基於JS，沒有更改HTML或CSS （解釋為代碼中的注釋） ：

 var listItemContainer = document.getElementById('carousel-index'); var imageChanger = document.getElementById('image-container').getElementsByTagName('img')[0]; var newSrc, fadeDelta=-0.01; //don't change 'delta', change 'fadeoutDelay' and 'fadeinDelay' (function initImageChanger(i,count){ imageChanger.style.opacity = 1; //set opacity in JS, otherwise the value returns "" (empty) listItemContainer.children[i].onclick = function(){ var fadeoutDelay=5, fadeinDelay=15, opacity=parseFloat(imageChanger.style.opacity); //change delays to alter fade-speed function changeSrc(){ var src = imageChanger.getAttribute('src'); var ext = src.substring(src.lastIndexOf('.')); //store extension src = src.substring(0,src.lastIndexOf('_')+1); //store source up to the identifying number return src+i+ext; //combine parts into full source } function fade(delay){ imageChanger.style.opacity = (opacity+=fadeDelta); if (fadeDelta<0 && opacity<=0){ //fade-out complete imageChanger.setAttribute('src',newSrc); fadeDelta*=-1, delay=fadeinDelay; //invert fade-direction } else if (fadeDelta>0 && opacity>=1){newSrc=null, fadeDelta*=-1; return;} //fade-in complete, stop function setTimeout(function(){fade(delay);},delay); } //start fade, but only if image isn't already fading, otherwise only change source (and reset) if (changeSrc() != imageChanger.getAttribute('src')){ newSrc=changeSrc(); if (opacity==0 || opacity==1){fade(fadeoutDelay);} else if (fadeDelta>0){fadeDelta *= -1;} //reset fade for new source } }; if (++i < count){initImageChanger(i,count);} //iterate to next element })(0,listItemContainer.children.length); //supply start-arguments 

 body {text-align:center;} #image-container img {width:auto; height:150px;} #carousel-index {margin:0; padding:0;} #carousel-index li {display:inline-block; width:2em; height:2em; border-radius:100%; background-color:#666; cursor:pointer;} 

 <div id="image-container"> <img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/> <ul id="carousel-index"><li></li><li></li><li></li></ul> </div> 

codepen： http ://codepen.io/anon/pen/xgwBre?editors=0010

Answer 5

這不是一個完美的解決方案，但這是不使用jQuery的一種方法：

首先創建一個新函數：

function fadeChange(element) {
    var op = 0.1;
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
    }, 10);
}

然后在設置新圖像時調用該函數：

fadeChange(imageChanger[0]);

這是通過此處更新的codepen演示的。

它有點笨拙，但確實會使圖像褪色。 您可能要考慮為監視器使用單個圖像，然后通過此方法簡單地更改監視器的內容 。