Question

我正在尝试在我的网站上使用此JQuery滑块。幻灯片工作得很好，就像它们应该的那样，但是我所遇到的问题是幻灯片之间的间隙，那里没有图片，下面的所有文字都跳到页面顶部，然后下一张幻灯片显示，它显然会将其推回，有没有办法使文本始终保持在同一个地方，并且不会被幻灯片显示拖放？

    function startSlides(start, end, delay) {
        setTimeout(slideshow(start,start,end, delay), delay);
    }
    function slideshow(frame, start, end, delay) {
        return (function() {
        $('#slideshow' + frame).fadeOut();
        if (frame == end) { frame = start; } else { frame += 1; }
        setTimeout(function(){$('#slideshow' + frame ).fadeIn();}, 850);
        setTimeout(slideshow(frame, start, end, delay), delay + 850);
    })
    }
    // usage: startSlides(first frame, end frame, delay time);
    startSlides(1, 3, 5000);

.slideshow{
	height:359px;
	width:1000px;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<div id="slideshow">
					
		<div id="slideshow1" class="slide">
			<div><img src="http://wallpaperrich.com/wp-content/uploads/2014/09/3d-animated-frog-image.jpg" alt="Slide 1"></div>
			</div>
			<div id="slideshow2" class="slide" style="display: none">
				<div><img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="Slide 1"></div>
			</div>
			<div id="slideshow3" class="slide" style="display: none">
				<div><img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="Slide 1"></div>
			</div>
	</div>


<p>Bacon ipsum dolor amet tri-tip ribeye beef ribs chuck. Tail venison shank, cupim tongue pork loin beef ribs drumstick kevin ground round fatback. Boudin chicken andouille ham spare ribs fatback beef bresaola landjaeger frankfurter tongue. Hamburger fatback brisket flank. Pork loin kielbasa biltong tail pork chop pancetta bacon cow rump. Prosciutto pork loin cupim t-bone tongue shankle kielbasa, pastrami filet mignon ham jowl beef pork chop rump drumstick.</p>

Answer 1

更改CSS

.slideshow

到

#slideshow

您将CSS规则应用于名为幻灯片的类，但HTML中没有。这是一个ID

JQuery Slider移动文本

1 个答案: