Question

我的互联网速度非常慢（<1.5 mbps），这有一个好处：测试网站功能令人惊叹。

我制作了一张图片幻灯片。它有效，除了幻灯片更改时，新幻灯片出现在当前幻灯片下方。这与我真棒的互联网有关，还是对于那些拥有高速（真实）互联网的人来说也是一个问题？我该如何解决这个问题呢？

＆＃13;

var slide_id = 0;
var total_slides = 0;
var nextSlide = function(){
    if (slide_id + 1 == total_slides) {
         slide_id = 0;   
    } else {
         slide_id++;   //count up then revert to 0
    }
    $('.carousel img').fadeOut();
    $('.carousel__image--slide' + slide_id).fadeIn();
};

$(document).ready(function(){
    total_slides = $('.carousel img').length;
    var timer = setInterval(nextSlide,3000);
});

＆＃13;

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.width_retainer{
	max-width:1000px;
	margin: 0 auto;
}
.header{
	height:80px;
	background-color:#d74b36;
}

.carousel__image{
	width:100%;
	display: none;
}
.carousel__image--slide0{
	display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<link type="text/css" rel="stylesheet" href="studs.css">
	<script src="jquery.js"></script>
	<script src="studs.js"></script>
</head>
<body>
	<div class="width_retainer">
		<div class="header"></div>

		<div class="carousel">
			<img class="carousel__image carousel__image--slide0" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__0_zps13isuxhq.jpg">
			<img class="carousel__image carousel__image--slide1" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__1_zpsjjh046r0.jpg">
			<img class="carousel__image carousel__image--slide2" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__2_zpsdjseyr2g.jpg">
			<img class="carousel__image carousel__image--slide3" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__3_zpsu6vadamg.jpg">
			<img class="carousel__image carousel__image--slide4" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__4_zpsuoqdagzs.jpg">
			<img class="carousel__image carousel__image--slide5" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__5_zpsxyb66qcd.jpg">
			<img class="carousel__image carousel__image--slide6" src="http://i1070.photobucket.com/albums/u494/fatblacklip/carousel-test-imgs/test-img__6_zpswlarodo8.jpg">
		</div>
	</div>
</body>
</html>

＆＃13;

Answer 1

尝试在fadeOut完成后进行淡入淡出：

$('.carousel img:visible').fadeOut(function(){
  $('.carousel__image--slide' + slide_id).fadeIn();
});

编辑：现在只淡出可见图像。

jQuery setInterval幻灯片落后

1 个答案: