图像在幻灯片放映中跳跃

Question

我正在开发的网站上播放幻灯片。它的工作正常，除了图像低于它应该出现并跳起来。 fiddle

我不确定我在这里做错了什么，有人可以帮助我吗？

function startSlideShow(){
    
    var triggers = $('ul.triggers li');
    var preview = $('ul.preview li');
    var lastElem = triggers.length-1;
    var target;
    
    triggers.first().addClass('active');
    preview.hide().first().show();
    
    function sliderResponse(target) {
        preview.fadeOut(600).eq(target).fadeIn(600);
        triggers.removeClass('active').eq(target).addClass('active');
    }
    
    triggers.click(function() {
                   if ( !$(this).hasClass('active') ) {
                   target = $(this).index();
                   sliderResponse(target);
                   resetTiming();
                   }
                   });
    
    $('.next').click(function() {
                     target = $('ul.triggers li.active').index();
                     target === lastElem ? target = 0 : target = target+1;
                     sliderResponse(target);
                     resetTiming();
                     });
    $('.prev').click(function() {
                     target = $('ul.triggers li.active').index();
                     lastElem = triggers.length-1;
                     target === 0 ? target = lastElem : target = target-1;
                     sliderResponse(target);
                     resetTiming();
                     });
    
    function sliderTiming() {
        target = $('ul.triggers li.active').index();
        target === lastElem ? target = 0 : target = target+1;
        sliderResponse(target);
    }
    
    var timingRun = setInterval(function() { sliderTiming(); },5000);
    function resetTiming() {
        clearInterval(timingRun);
        timingRun = setInterval(function() { sliderTiming(); },5000);
    }
    
};

#content #product_display{
    position:relative;
    margin-top:40px;
    width:100%;
    height:747px;
    overflow:hidden;
}
#content #product_display img{
    position:absolute;
    z-index:1;
    width:1120px;
    height:747px;
}
#content #product_descripton{margin-top:10px;}
#product_control_div{
    position:absolute;
    z-index:100;
    height:40px;
    top:747px;
    width:calc(1120px - 10px);
    padding:5px;
    text-align:center;
    background:rgba(70,70,70,1.0);
}
#content #product_display:hover > #product_control_div{
    top:calc(747px - 50px);
}

#content ul.product_triggers{
    display:inline-block;
}
#content ul.product_triggers li {
    list-style-type:none;
    float:left;
    padding:5px;
    margin:5px;
    margin-top:15px;
    cursor:pointer;
    background-color:#7b7b7b;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
}
#content ul.product_triggers li.active {
    background-color:#ed676b;
}
#content .control {
    cursor:pointer;
    position:relative;
    padding:calc(20px - 2px);
    border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -o-border-radius:20px;
    border:2px solid #7b7b7b;
}
#content .control:hover {
    border:2px solid #ed676b;
}
#content .control:hover > .upper_line,#content .control:hover > .lower_line{
    border-bottom: 2px solid #ed676b;
}
#content .control .upper_line{
    width: 15px;
    height: 30px;
    border-bottom: 2px solid #7b7b7b;
    -webkit-transform:
    translateY(-20px)
    translateX(5px)
    rotate(45deg);
    position: absolute;
}
#content .control .lower_line{
    width: 15px;
    height: 30px;
    border-bottom: 2px solid #7b7b7b;
    -webkit-transform:
    translateY(20px)
    translateX(5px)
    rotate(-45deg);
    position: absolute;
}
.prev .upper_line{
    top:16.5px;
    left:15px;
}
.prev .lower_line{
    bottom:37px;
    left:-6px;
}
.next .upper_line{
    top:7px;
    left:18px;
}
.next .lower_line{
    bottom:27px;
    left:-3px;
}
#content .prev { float:left; }
#content .next { float:right; }

    <div id="content">
      
<div id="product_display">
                <ul class="product_images">
                    
                    
                    <script>
                      var count=3;
                      var title="Cedar Ridge Animal Hospital";

                      
                      
                      
                        var block = '';
                        for(var i=1; i<=count; i++){
                            block += '<li><img src="http://cutthroatdevelopmentllc.com/final/images/full/';
                            block += title;
                            block += '/';
                            block += i;
                            block += '.jpg" alt="';
                            block += title;
                            block += '"></li>';
                        }
                        document.write(block);
                    </script>
                </ul>
                
                <div id="product_control_div">
                    
                    <ul class="product_triggers">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    
                    <div class="control prev"><div class="upper_line"></div><div class="lower_line"></div></div>
                    <div class="control next"><div class="upper_line"></div><div class="lower_line"></div></div>
                    
                </div>
                
            </div>
<script>startLargeSlideShow();</script>
      </div>

Answer 1

问题是两个<li>s暂时都是display: list-item;，直到动画/淡出完成（这是前一个图像更改为display: none;）。见图片：

有几种方法可以解决这个问题。我建议将幻灯片中的所有图像相对于#product_display放置在绝对位置，这样它们就不会受到其他图像布局的影响。

编辑：更多信息，如果您查看开发人员工具，您可以看到我上面提到的内容。观看动画播放时，<li>都有display: list-item;