Question

我正在使用网页的源代码在我的网站上添加滑块。但是，滑块的第一张图像显示为空白。目前，我的滑块中有五个图像。但是，在滑块之前，始终显示为空白图像。我尝试了很多，并使用google inspect element选项调试了代码，但是我无法找出问题所在。

section#hero {
	height: 395px;
	border-bottom: 2px solid #d9dadb;
	background: #fff;
	clear: both;
}
div.page {
	min-height: 400px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
}
div#hero {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	height: 395px;
	overflow: hidden;
}
	div #hero .cycle-slideshow,
	div#hero div.slider-image {
		float: left;
		width: 100%;
	}
	
	.bannerimage {
		width: 294px;
		padding: 20px 20px 30px 20px;
	}

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
        <title>Marvel Tech</title>
			<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
			<link rel="stylesheet" href="style.css" />
            </head>
<body>

        	  <!–– Slider Section >
<section id="hero">

	<div id="hero" style="position:relative;">
		<div id="slider-prev">
			<img src="images/slide_left.png" alt="Previous Slide">
		</div>
      <!–– First Image >
		<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-slides="> div" data-cycle-prev="#slider-prev" data-cycle-next="#slider-next" style="position: relative
		; overflow: hidden;">
		<div class="slider-image cycle-slide cycle-sentinel" style="clear: both; width: 100%; box-sizing: border-box; position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
					<div style="width: auto; position: static; top: 0px; left: 0px; z-index: 70; visibility: hidden;">
						<a href="/services/turbomachinery-design" style="visibility: hidden;"><img src="images/turbine_hero001c.jpg" style="visibility: hidden;"></a>
					</div></div>
					
					      <!–– Second Image >
			<div class="slider-image cycle-slide" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 1; display: block;">
					<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
						<a href=""><img src="images/turbine_hero001a.jpg"></a>
					</div>
          </div>
  <!–– Third Image >
			<div class="slider-image cycle-slide cycle-slide-active" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 99; visibility: visible; opacity: 1; display: block;">
					<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
						<a href=""><img src="images/turbine_hero001d.jpg"></a>
					</div>
					</div>
			<div class="slider-image cycle-slide" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 1; display: block;">
					<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
						<a href=""><img src="images/hero_01a.jpg"></a>
					</div>
			</div>
			<div class="slider-image cycle-slide" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 1; display: block;">
					<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
						<a href=""><img src="images/sg35f.JPG"></a>
					</div>
				</div>
		<div id="slider-next">
			<img src="images/slide_right.png" alt="Next Slide">
		</div>
	</div>
</section>

                    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                    <script type='text/javascript' src='a6ecd37.js'></script>
                
     </body>
</html>

为什么在jquery滑块的开头显示空白图像

0 个答案: