3
這是我第一次嘗試創建一個基於按鈕的滑塊。爲什麼jQuery在選擇時滑動？
每張幻燈片分爲2部分，左側部分包含圖像，右側部分包含一些文本。在幻燈片加載之前切換幻燈片時會出現意外跳動，我似乎無法理解它發生的原因。
有沒有什麼好的方法來實現這個幻燈片？
下面是代碼：
$(function() {
imw_slider();
})
function imw_slider() {
var button = $('.slide-button');
button.click(function() {
\t button.css('background-color', '#fff');
\t $(this).css('background-color', '#eee');
var index = $(this).index();
var image = $(this).parent().prev();
\t image.children('.slide:not(:nth-child('+(index+1)+'))').fadeOut(function() {
image.children('.slide:nth-child('+(index+1)+')').fadeIn();
});
});
}.image-box > .images {
text-align: center;
}
.image-box > .images > .slide:nth-child(1) {
display: block;
}
.image-box .slide.slide-2 {
position: relative;
max-width: 80rem;
margin: 0 auto;
}
.image-box > .images > .slide {
display: none;
}
.image-box > .images > .slide:after {
display: block;
content: '';
clear: both;
}
.image-box .slide.slide-2 > div {
width: 50%;
float: left;
}
.image-box .buttons {
display: table;
margin: 0 auto;
margin-top: 15px;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.image-box .buttons .slide-button {
display: table-cell;
cursor: pointer;
padding: 2px 10px;
border-right: 1px solid #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-box my4">
<div class="images">
<div class="slide slide-2">
<div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div>
<div>
<div class="text">
<h2>This is the text for slide 1</h2></div>
</div>
</div>
<div class="slide slide-2">
<div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div>
<div>
<div class="text">
<h2>This is the text for slide 2</h2></div>
</div>
</div>
<div class="slide slide-2">
<div><img src="http://test.storeapps.org/wp-content/uploads/2016/11/Putler-Web-customers-sample.png" alt="" /></div>
<div>
<div class="text">
<h2>This is the text for slide 3</h2></div>
</div>
</div>
</div>
<div class="buttons"><span class="slide-button">button-1</span><span class="slide-button">button-2</span><span class="slide-button">button-3</span></div>
</div>
@SiddharthThevaril的問題是，你正在淡出*所有*幻燈片和然後在目前的淡出，你應該淡出*只有*上一張幻燈片修復它，檢查了這一點... – kukkuz
這將工作，如果一個頁面有多個滑塊？ –
是的，我猜你可以修改它以適用於多個滑塊 – kukkuz