向我的图像滑块添加过渡效果

Question

我正在使用图像滑块，并且正在尝试从sratch做一个，以便我可以在此过程中学习。 我能够做的非常简单，我想添加过渡效果，例如淡出或类似效果。 如果有人知道如何将其添加到我的代码中，它将对我有很大帮助。 这是我到目前为止所做的：

 var currentIndex = 0, items = $('.container div'), itemAmt = items.length; function cycleItems() { var item = $('.container div').eq(currentIndex); items.hide(); item.css('display','inline-block'); } var autoSlide = setInterval(function() { currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }, 3000); $('.next').click(function() { clearInterval(autoSlide); currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }); $('.prev').click(function() { clearInterval(autoSlide); currentIndex -= 1; if (currentIndex < 0) { currentIndex = itemAmt - 1; } cycleItems(); }); 

 .container { max-width: 200px; background-color: black; margin: 0 auto; text-align: center; position: relative; } .container div { background-color: white; width: 100%; display: inline-block; display: none; } .container img { width: 100%; height: auto; } button { position: absolute; } .next { right: 5px; } .prev { left: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="demo"> <button class="next">Next</button> <button class="prev">Previous</button> <div class="container"> <div style="display: inline-block;"> <img src="https://placeimg.com/400/200/people"/> </div> <div> <img src="https://placeimg.com/400/200/any"/> </div> <div> <img src="https://placeimg.com/400/200/nature"/> </div> <div> <img src="https://placeimg.com/400/200/architecture"/> </div> <div> <img src="https://placeimg.com/400/200/animals"/> </div> <div> <img src="https://placeimg.com/400/200/people"/> </div> <div> <img src="https://placeimg.com/400/200/tech"/> </div> </div> </section> 

Answer 1

您可以从jQuery使用.fadeIn() 。

item.fadeIn();

运行以下代码片段：

 var currentIndex = 0, items = $('.container div'), itemAmt = items.length; function cycleItems() { var item = $('.container div').eq(currentIndex); items.hide(); item.fadeIn();//css('display','inline-block'); } var autoSlide = setInterval(function() { currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }, 3000); $('.next').click(function() { clearInterval(autoSlide); currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }); $('.prev').click(function() { clearInterval(autoSlide); currentIndex -= 1; if (currentIndex < 0) { currentIndex = itemAmt - 1; } cycleItems(); }); 

 .container { max-width: 200px; background-color: black; margin: 0 auto; text-align: center; position: relative; } .container div { background-color: white; width: 100%; display: inline-block; display: none; } .container img { width: 100%; height: auto; } button { position: absolute; } .next { right: 5px; } .prev { left: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="demo"> <button class="next">Next</button> <button class="prev">Previous</button> <div class="container"> <div style="display: inline-block;"> <img src="https://placeimg.com/400/200/people"/> </div> <div> <img src="https://placeimg.com/400/200/any"/> </div> <div> <img src="https://placeimg.com/400/200/nature"/> </div> <div> <img src="https://placeimg.com/400/200/architecture"/> </div> <div> <img src="https://placeimg.com/400/200/animals"/> </div> <div> <img src="https://placeimg.com/400/200/people"/> </div> <div> <img src="https://placeimg.com/400/200/tech"/> </div> </div> </section>