Question

如何在我创建的此照片滑块中的图像之间添加fadeIn / fadeOut过渡。

虽然我真诚地感谢一些人建议使用插件来实现相同的结果，但我正在使用本机JavaScript，因为我正在努力建立对语言的理解。

HTML：

<body onLoad="photoA()">
<div id="slider">
  <img src="Images/img1.jpg" id="image"/>
  <img src="Images/img2.jpg" id="image"/>
  <img src="Images/img3.jpg" id="image"/>
  <img src="Images/img4.jpg" id="image"/>
  <img src="Images/img5.jpg" id="image"/>
</div>

  <div class="left_hold"><img onClick="photo(-1)" class="left" src="Images/arrow_left.png"></div>
  <div class="right_hold"><img onClick="photo(1)" class="right"  src="Images/arrow_right.png"></div>

JAVASCRIPT

var imageCount = 1;
var total = 5;

function photo(x) {
  var image = document.getElementById('image');
  imageCount = imageCount + x;
    if(imageCount > total){imageCount = 1;}
    if(imageCount < 1){imageCount = total;} 

image.src = "Images/img"+ imageCount +".jpg";
  clearInterval(time);                                // clear interval stops the set interval.
  time =  window.setInterval(function photoA() {      // giving the value of time the same function below starts the loop 
  var image = document.getElementById('image');
  imageCount = imageCount + 1;
    if(imageCount > total){imageCount = 1;}
      if(imageCount < 1){imageCount = total;} 
       image.src = "Images/img"+ imageCount +".jpg";
       },5000);
  }

  var time = window.setInterval(function photoA() {    // just assign the function to the variable so you can target it.
    var image = document.getElementById('image');
imageCount = imageCount + 1;
  if(imageCount > total){imageCount = 1;}
     if(imageCount < 1){imageCount = total;} 
       image.src = "Images/img"+ imageCount +".jpg";
       },5000);
  }

用于照片滑块的原生JavaScript

0 个答案: