У меня есть ползунок с 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.

0
GhostOrder 10 Янв 2017 в 04:39

5 ответов

Лучший ответ

Использовать анимацию CSS3 с добавлением класса в JavaScript

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>
1
Deep 10 Янв 2017 в 03:19

Еще одна альтернатива, основанная на 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
1
myfunkyside 10 Янв 2017 в 08:56

Вы можете использовать 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> 

Постскриптум Изображения должны быть предварительно загружены, чтобы все работало нормально при первой загрузке.

1
sinisake 10 Янв 2017 в 03:10

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);
2
Yaje 10 Янв 2017 в 02:54