'视差滑块'没有显示在div中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了'视差滑块'没有显示在div中相关的知识，希望对你有一定的参考价值。
但滑块中的div没有任何东西！我已经仔细检查了所有内容，而且一切都很酷......我在所有文件夹中都粘贴了'jquery.cslider'文件，试图让它工作......这是我的html代码：
<!--********************************************* Mainmenu Start *********************************************-->
<div id="menu_wrapper">
<div id="menu_left"></div>
<ul id="menu">
<li><a href="index-2.html">Accueil</a></li>
<li><a href="banner2.html">Second banner</a></li>
<li><a href="post_list.html">post list</a></li>
<li><a href="post.html">Post</a></li>
<li><a href="post_game.html">Post with game</a></li>
<li><a href="full_page.html">Full page</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contacte</a></li>
</ul>
<div id="menu_right"></div>
</div>
<!--********************************************* Mainmenu end *********************************************-->
<!--********************************************* Banner start *********************************************-->
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2><a href="#" class="da-link">For gamer by gamers</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Ut iaculis lorem vitae arcu elementum pellentesque. <br />
Praesent pellentesque ornare neque id lobortis.</p>
<div class="da-img"><img alt="alt_example" src="images/paralax_banner/3.png" /></div>
</div>
<div class="da-slide">
<h2><a href="#" class="da-link">TEKKEN TAG 2</a></h2>
<p>Phasellus ac leo turpis. Morbi at pulvinar augue. <br />
Aenean rhoncus ultrices volutpat. Vivamus eget enim ut orci iaculis condimentum sed a quam. </p>
<div class="da-img"><img alt="alt_example" src="images/paralax_banner/2.png" /></div>
</div>
<div class="da-slide">
<h2><a href="#" class="da-link">WOW CATACLYSM</a></h2>
<p>Etiam eu massa lectus. Nunc mi velit, commodo ut ullamcorper et, consectetur vel dolor. Etiam tincidunt convallis metus non suscipit.</p>
<div class="da-img"><img alt="alt_example" src="images/paralax_banner/1.png" /></div>
</div>
<div class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </div>
</div>
<!--********************************************* Banner end *********************************************-->
答案
这是'paralax_slider.css'文件的代码
.da-slider{
width:947px !important;
height:290px !important;
border:1px solid #341d1d;
background:#0d0d0d;
margin-left:5px !important;
margin-top:15px;
-moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.8);
width: 100%;
min-width: 947px;
position: relative;
overflow: hidden;
background: transparent url(../images/paralax_banner/waves.gif) repeat 0% 0%;
-webkit-transition: background-position 1s ease-out 0.3s;
-moz-transition: background-position 1s ease-out 0.3s;
-o-transition: background-position 1s ease-out 0.3s;
-ms-transition: background-position 1s ease-out 0.3s;
transition: background-position 1s ease-out 0.3s;
}
.da-slide{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
text-align: left;
}
.da-slide-current{
z-index: 1000;
}
.da-slider-fb .da-slide{
left: 100%;
}
.da-slider-fb .da-slide.da-slide-current{
left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-img{
position: absolute;
opacity: 0;
left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p{
left: 10%;
opacity: 1;
}
.da-slider-fb .da-slide .da-img{
left: 400px;
opacity: 1;
}
.da-slide h2{
color: #fff;
font-size: 50px;
width: 50%;
top: 15px;
white-space: nowrap;
z-index: 10;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-family: 'Economica', Arial, sans-serif;
font-weight: 700;
text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
}
.da-slide p{
width: 45%;
top: 115px;
color: #cc9999;
font-size: 16px;
line-height: 26px;
height: 80px;
overflow: hidden;
font-family: 'Economica', Arial, sans-serif;
font-weight: 400;
font-style: italic;
z-index:99;
text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
}
.da-slide .da-img{
text-align: center;
width: 30%;
top: 0px;
height: 256px;
line-height: 320px;
left: 400pxpx; /*400px*/
z-index:1;
}
.da-slide .da-link{
color: #fff;
text-decoration:none;
transition:all 0.35s ease-in-out;
/* Firefox 4 */
-moz-transition:all 0.35s ease-in-out;
/* Safari and Chrome */
-webkit-transition:all 0.35s ease-in-out;
/* Opera */
-o-transition:all 0.35s ease-in-out;
}
.da-slide .da-link:hover{
color:#ff2a2a;
text-decoration:none;
transition:all 0.35s ease-in-out;
/* Firefox 4 */
-moz-transition:all 0.35s ease-in-out;
/* Safari and Chrome */
-webkit-transition:all 0.35s ease-in-out;
/* Opera */
-o-transition:all 0.35s ease-in-out;
}
.da-dots{
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 20px;
z-index: 2000;
-moz-user-select: none;
-webkit-user-select: none;
}
.da-dots span{
display: inline-block;
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #d41e1a;
margin: 3px;
cursor: pointer;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.1);
}
.da-dots span.da-dots-current:after{
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
background: #5e0101;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
.da-arrows{
-moz-user-select: none;
-webkit-user-select: none;
}
.da-arrows span{
position: absolute;
top: 50%;
height: 30px;
width: 30px;
border-radius: 50%;
background:none;
cursor: pointer;
z-index: 2000;
opacity: 0;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.1);
-webkit-transition: opacity 0.4s ease-in-out-out 0.2s;
-moz-transition: opacity 0.4s ease-in-out-out 0.2s;
-o-transition: opacity 0.4s ease-in-out-out 0.2s;
-ms-transition: opacity 0.4s ease-in-out-out 0.2s;
transition: opacity 0.4s ease-in-out-out 0.2s;
}
.da-slider:hover .da-arrows span{
opacity: 1;
}
.da-arrows span:after{
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 5px;
left: 5px;
background: transparent url(../images/paralax_banner/arrows.png) no-repeat top left;
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.da-arrows span:hover:after{
box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.da-arrows span:active:after{
box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.da-arrows span.da-arrows-next:after{
background-position: top right;
}
.da-arrows span.da-arrows-prev{
left: 15px;
}
.da-arrows span.da-arrows-next{
right: 15px;
}
.da-slide-current h2,
.da-slide-current p{
left: 10%;
opacity: 1;
}
.da-slide-current .da-img{
left: 400px;
opacity: 1;
}
/* Animation classes and animations */
/* Slide in from the right*/
.da-slide-fromright h2{
-webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright p{
-webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
-moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
-o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
-ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .da-img{
-webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
-moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
-o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
-ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromRightAnim1{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim2{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim3{
0%{ left: 110%; opacity: 0; }
1%{ left: 10%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim4{
0%{ left: 110%; opacity: 0; }
100%{ left: 400px; opacity: 1; }
}
@-moz-keyframes fromRightAnim1{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim2{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim3{
0%{ left: 110%; opacity: 0; }
1%{ left: 10%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim4{
0%{ left: 110%; opacity: 0; }
100%{ left: 400px; opacity: 1; }
}
@-o-keyframes fromRightAnim1{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim2{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim3{
0%{ left: 110%; opacity: 0; }
1%{ left: 10%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim4{
0%{ left: 110%; opacity: 0; }
100%{ left: 400px; opacity: 1; }
}
@-ms-keyframes fromRightAnim1{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim2{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim3{
0%{ left: 110%; opacity: 0; }
1%{ left: 10%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim4{
0%{ left: 110%; opacity: 0; }
100%{ left: 400px; opacity: 1; }
}
@keyframes fromRightAnim1{
0%{ left: 110%; opacity: 0以上是关于'视差滑块'没有显示在div中的主要内容，如果未能解决你的问题，请参考以下文章
windows 10系统，codeblocks中代码运行后，输出结果中有乱码？