Question

当我点击底部的箭头（幻灯片导航器箭头）时，您是否知道为什么页面会向上移动？这一直困扰着我一段时间。

HTML

<div class="slideshow ">
<div class="slides">
<img class ="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
<img class ="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
<img class ="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
<img class ="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
</div>

<div class="dots-container">
<ul class="slider-dots">
<a href="javascript:void(0);" class="arrow-prev" ><<</a>
    <li class="dot active-dot">&bull;</li>
    <li class="dot">&bull;</li>
    <li class="dot">&bull;</li>
    <li class="dot">&bull;</li>
<a href="javascript:void(0);" class="arrow-next" >>></a>
</ul>
</div>

CSS

.slideshow{
background-color:#000;
text-align:center;
width:100%;
position:relative;
}

/*image slides*/
.slides{
height:100%;
max-width:100%;

}

.slide{
display:none;
margin:2em;
max-width:70%;
max-height:100%;
}


.active-slide {
display:inline;
max-width:70%;
max-height:100%;
}

/*dots*/
.slider-dots{
text-align:center;
width:100%;
font-size:1.5em;
padding:1%;
}

.dots-container{
padding:1em;
}

.slider-dots li{
display:inline;
}

.arrow-prev, .arrow-next{
font-size:16px;
color:rgb(77, 151, 201);
margin-left:1.8em;
margin-right:1.8em;
font-weight:bold;
}

a.arrow-prev:hover, a.arrow-next:hover,a.arrow-prev:active, a.arrow-next:active
{
color:#fff;
text-decoration:none;}

.active-dot{
color:#fff;
}

我已阅读多个主题，但似乎没有具体的解决方案。

以下是jsFiddle

Answer 1

对于这两行：

nextSlide.fadeIn(2300).addClass('active-slide').show();
currentSlide.fadeOut(2300).removeClass('active-slide').hide();

发生什么事情是你删除了磁贴，所以页面缩小了...然后你再添加一个，以便它扩展。然而，当它收缩时，一切都向上移动以适应它。你获得的经验是因为它的发生速度比你能感知的要快。

尝试颠倒顺序：

currentSlide.fadeOut(2300).removeClass('active-slide').hide();
nextSlide.fadeIn(2300).addClass('active-slide').show();

或者，如果这导致闪烁，则为父容器提供绝对高度。

Answer 2

你的jsfiddle中有一些错误，所以如果你修复它，你就有了工作的应用程序。修复它只是在资源部分

中添加jquery和bootstrap.css

我已经附上工作fiddle

所以html应该只是：

<body>
    <div class="nav navbar-fixed-top">
        <div class="container">
            <ul class="pull-left">  <a href="#"><li>Team</li></a>
    <a href="#"><li>Learn more</li></a>
    <a href="#"><li>Contact</li></a>

            </ul>
            <ul class="pull-right"> <a href="#"><li>Learn more</li></a>
    <a href="#"><li>Contact</li></a>

            </ul>
        </div>
    </div>
    <div class="jumbotron">
        <div class="container">
                <h3>WELCOME TO SAN ANDREAS</h3>

            <p>Prepare to make your dreams come true...
                <p>
        </div>
    </div>
    <div class="actors">
<span>TEAM</span>

        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/92/f5/92f51c2146c471daad1002221888f4d3.jpg?itok=MExy-qsb"> <span>MICHAEL</span>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="http://cdn2-b.examiner.com/sites/default/files/styles/image_content_width/hash/71/92/7192e2b9c8b6a24e3c9d824942799228.jpg?itok=LVyYEoB4"> <span>TREVOR</span>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_franklin_256x256.jpg">   <a href="#"><span>FRANKLIN</span></a>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slideshow ">
        <div class="slides">
            <img class="slide active-slide" src="http://gearnuke.com/wp-content/uploads/2015/06/GTA-5.jpg">
            <img class="slide" src="http://cdn.wegotthiscovered.com/wp-content/uploads/gta5.jpg">
            <img class="slide" src="http://www.igta5.com/images/official-artwork-trevor-yellow-jack-inn.jpg">
            <img class="slide" src="http://cdn2.knowyourmobile.com/sites/knowyourmobilecom/files/styles/gallery_wide/public/0/67/GTAV-GTA5-Michael-Sweatshop-1280-2277432.jpg?itok=nKEHENTW">
        </div>
        <div class="dots-container">
            <ul class="slider-dots">    <a href="javascript:void(0);" class="arrow-prev"><<</a>

                <li class="dot active-dot">&bull;</li>
                <li class="dot">&bull;</li>
                <li class="dot">&bull;</li>
                <li class="dot">&bull;</li> <a href="javascript:void(0);" class="arrow-next">>></a>

Answer 3

只需更改顺序，然后强制它滚动到页面底部，这样它将保持在底部

nextSlide.fadeIn(2300).addClass('active-slide').show();
currentSlide.fadeOut(2300).removeClass('active-slide').hide();
$(window).scrollTop($(document).height());

您可以在这里查看http://jsfiddle.net/wvgqnzf9/

Answer 4

简单修复。设置slides容器的最小高度。

.slides {
  height: 100%;
  max-width: 100%;
  min-height: 500px; // set as per your requirement
}

您的幻灯片是fade out，这意味着它们会离开DOM，因此会导致漏洞并降低文档的高度，这就是为什么它向上滚动然后下滑fade ing { {1}}。所以你需要同时保持容器完整，所以要有一些固定的最小高度。

为什么页面向上移动？

4 个答案: