Question

我有一个带有3个图像和3个按钮的滑块，用于更改当前图像＆＃39; src＆＃39;属性（因此更改当前图像），但现在我想在更改图像时添加平滑过渡，我想使用css过渡来获得此属性。

因此，当我点击任何项目符号时，我需要当前图像淡出然后新图像淡入。我该怎么做？

＆＃13;

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);
};

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

这是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

使用CSS3动画并在javascript中添加类

＆＃13;

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);
};

＆＃13;

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
    }
}

＆＃13;

<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>

＆＃13;

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;
}

然后，点击（删除添加的类 - ＆gt;再次将不透明度设置为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>

P.S。图像应该预先加载，以便在首次加载时都能正常工作。

Answer 4

另一个替代方案，基于JS，没有更改HTML或CSS （解释为代码中的注释）：

＆＃13;

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

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

＆＃13; 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 here。

进行了演示

它有点笨重，但确实淡化了图像。您可能需要考虑将单个图像用于监视器，然后通过此方法简单地更改监视器的内容。

将过渡css添加到图像滑块

5 个答案: