Question

这是我第一次尝试创建基于按钮的滑块。

每张幻灯片分为两部分，左侧部分包含图像，右侧部分包含一些文本。当切换幻灯片时，在幻灯片加载之前出现了意外的反弹，我似乎无法理解它为什么会发生。

有没有什么好方法可以实现这张幻灯片？

以下是代码：

＆＃13;

$( function() {
  imw_slider();
})

function imw_slider() {
    var button = $( '.slide-button' );
    button.click( function() {
    	button.css( 'background-color', '#fff' );
    	$(this).css( 'background-color', '#eee' );
        var index = $(this).index();
        var image = $(this).parent().prev();
	image.children('.slide:not(:nth-child('+(index+1)+'))').fadeOut( function() {
            image.children('.slide:nth-child('+(index+1)+')').fadeIn();
        });
    });
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

除了淡出以外的所有幻灯片，而不是在中消失的幻灯片，您可以先隐藏它们，然后淡入当前幻灯片使用此：

bounds.offsetInPlace(dx: 0.0, dy: -20.0)
bounds.size.height = bounds.height + 20.0

或者更好的是，您可以保存最后的活动幻灯片和淡出，并淡入当前的幻灯片：

image.children('.slide:not(:nth-child('+(index+1)+'))').hide();
image.children('.slide:nth-child('+(index+1)+')').fadeIn();

见下面的演示：

    if (prev_slide) {
      prev_slide.fadeOut(function() {
        prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')');
        prev_slide.fadeIn();
      });
    } else {
      prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')');
      prev_slide.fadeIn();
    }

$(function() {
  imw_slider();
})
var prev_slide = null;

function imw_slider() {
  var button = $('.slide-button');
  button.click(function() {
    button.css('background-color', '#fff');
    $(this).css('background-color', '#eee');
    var index = $(this).index();
    var image = $(this).parent().prev();
    if (prev_slide) {
      prev_slide.fadeOut(function() {
        prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')');
        prev_slide.fadeIn();
      });
    } else {
      prev_slide = image.children('.slide:nth-child(' + (index + 1) + ')');
      prev_slide.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;
}

Answer 2

似乎JQuery立即调用了fadeOut函数的回调。您可以参考相关讨论：JQuery fadeOut(function(){fadeIn});

你可以简单地delay fadeIn：

＆＃13;

$( function() {
  imw_slider();
})

function imw_slider() {
    var button = $( '.slide-button' );
    button.click( function() {
    	button.css( 'background-color', '#fff' );
    	$(this).css( 'background-color', '#eee' );
        var index = $(this).index();
        var image = $(this).parent().prev();
	image.children('.slide:not(:nth-child('+(index+1)+'))').fadeOut( 1000, function() {
            image.children('.slide:nth-child('+(index+1)+')').delay(1000).fadeIn(1000);
        });
    });
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

为什么jQuery幻灯片会在选择上反弹？

2 个答案: