Question

我做了一个5个图像滑块，可以在几秒钟内自动更改图像。我希望在更改每个图像之前和之后淡出和动画。这是我的代码：

HTML：

<div id="slider"> <img id="bigImage" src="img/Traffic1.jpg"> </div>

JS：

var imageArray = ["img/Traffic1.jpg", "img/Traffic2.jpg", "img/Traffic3.jpg",
        "img/Traffic4.jpg","img/Traffic5.jpg"]; 
        var imageIndex = 0;
        function changeImageByTimer() {
        document.getElementById("bigImage").src = imageArray[imageIndex];

        imageIndex++;

            if (imageIndex > 4) {
                imageIndex = 0;
            }
        }

        var imgTimer = setInterval(changeImageByTimer, 3000);

我无法更改html代码只有javascript。我更喜欢只使用javascript。有什么建议吗？

Answer 1

所以，这是一个简单的JavaScript实现。您想要阅读jQuery，特别是动画，如果您想要自定义这一点。

这是工作中的jsBin：http://jsbin.com/pozutidu/5/edit?html,js,output

基本上，唯一重要的方面是：

  bigImage.animate({opacity: .1 }, function() { 

      $(this).attr('src', imageArray[imageIndex]) 

  });

那么这里发生了什么，你是否选择了Img，并为它设置了不透明度。一旦不透明度达到.1，回调函数将使用相同的元素并重新放置img.src。这样可以消除图像淡入和淡出的外观。

参考文献：http://jquery.com/，http://api.jquery.com/animate/

在运行之前，必须包含指向jQuery源文件的链接

＆LT; script src =＆＃34; http：//code.jquery.com/jquery-2.1.0.min.js" ＆GT;＆LT; /脚本＆GT;

Answer 2

/* HTML Code */
<div id="slideshow">
   <div>
     <img src="image1.jpg">
   </div>
   <div>
     <img src="image2.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>

/* CSS code */
#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

/* Js Code */
$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

自动照片滑块，淡入淡出动画 - 仅限javascript

2 个答案: