我在一个图像滑块工作,我正在努力做一个从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>
答案 0 :(得分: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>