“视差滑块”未显示在 div 中

【问题标题】：'Parallax Slider' not showing in the div“视差滑块”未显示在 div 中
【发布时间】：2017-12-29 22:07:22
【问题描述】：

但滑块的 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 *********************************************-->

【问题讨论】：

  • 我猜你的滑块是#da-slider，你能把你的js代码放上来吗？您将在代码中显示您在哪里使用 cslider 函数

标签： javascript html image slider jquery-ui-slider


【解决方案1】：

这里是文件'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; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}
/* Slide in from the left*/
.da-slide-fromleft h2{
    -webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft p{
    -webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
}

.da-slide-fromleft .da-img{
    -webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-moz-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-o-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-ms-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}
/* Slide out to the right */
.da-slide-toright h2{
    -webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright p{
    -webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    animation: toRightAnim2 0.6s ease-in-out 0.3s both;
}

.da-slide-toright .da-img{
    -webkit-animation: toRightAnim4 0.6s ease-in-out both;
    -moz-animation: toRightAnim4 0.6s ease-in-out both;
    -o-animation: toRightAnim4 0.6s ease-in-out both;
    -ms-animation: toRightAnim4 0.6s ease-in-out both;
    animation: toRightAnim4 0.6s ease-in-out both;
}
@-webkit-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-moz-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-o-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-ms-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
/* Slide out to the left*/
.da-slide-toleft h2{
    -webkit-animation: toLeftAnim1 0.6s ease-in-out both;
    -moz-animation: toLeftAnim1 0.6s ease-in-out both;
    -o-animation: toLeftAnim1 0.6s ease-in-out both;
    -ms-animation: toLeftAnim1 0.6s ease-in-out both;
    animation: toLeftAnim1 0.6s ease-in-out both;
}
.da-slide-toleft p{
    -webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toleft .da-img{
    -webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
}
@-webkit-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-moz-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-o-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-ms-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

【讨论】：

    【解决方案2】：

    这是文件'jquery.cslider'的代码：

    (function( $, undefined ) {

/*
 * Slider object.
 */
$.Slider                = function( options, element ) {

    this.$el    = $( element );

    this._init( options );

};

$.Slider.defaults       = {
    current     : 0,    // index of current slide
    bgincrement : 50,   // increment the bg position (parallax effect) when sliding
    autoplay    : false,// slideshow on / off
    interval    : 4000  // time between transitions
};

$.Slider.prototype  = {
    _init               : function( options ) {

        this.options        = $.extend( true, {}, $.Slider.defaults, options );

        this.$slides        = this.$el.children('div.da-slide');
        this.slidesCount    = this.$slides.length;

        this.current        = this.options.current;

        if( this.current < 0 || this.current >= this.slidesCount ) {

            this.current    = 0;

        }

        this.$slides.eq( this.current ).addClass( 'da-slide-current' );

        var $navigation     = $( '<nav class="da-dots"/>' );
        for( var i = 0; i < this.slidesCount; ++i ) {

            $navigation.append( '<span/>' );

        }
        $navigation.appendTo( this.$el );

        this.$pages         = this.$el.find('nav.da-dots > span');
        this.$navNext       = this.$el.find('span.da-arrows-next');
        this.$navPrev       = this.$el.find('span.da-arrows-prev');

        this.isAnimating    = false;

        this.bgpositer      = 0;

        this.cssAnimations  = Modernizr.cssanimations;
        this.cssTransitions = Modernizr.csstransitions;

        if( !this.cssAnimations || !this.cssAnimations ) {

            this.$el.addClass( 'da-slider-fb' );

        }

        this._updatePage();

        // load the events
        this._loadEvents();

        // slideshow
        if( this.options.autoplay ) {

            this._startSlideshow();

        }

    },
    _navigate           : function( page, dir ) {

        var $current    = this.$slides.eq( this.current ), $next, _self = this;

        if( this.current === page || this.isAnimating ) return false;

        this.isAnimating    = true;

        // check dir
        var classTo, classFrom, d;

        if( !dir ) {

            ( page > this.current ) ? d = 'next' : d = 'prev';

        }
        else {

            d = dir;

        }

        if( this.cssAnimations && this.cssAnimations ) {

            if( d === 'next' ) {

                classTo     = 'da-slide-toleft';
                classFrom   = 'da-slide-fromright';
                ++this.bgpositer;

            }
            else {

                classTo     = 'da-slide-toright';
                classFrom   = 'da-slide-fromleft';
                --this.bgpositer;

            }

            this.$el.css( 'background-position' , this.bgpositer * this.options.bgincrement + '% 0%' );

        }

        this.current    = page;

        $next           = this.$slides.eq( this.current );

        if( this.cssAnimations && this.cssAnimations ) {

            var rmClasses   = 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
            $current.removeClass( rmClasses );
            $next.removeClass( rmClasses );

            $current.addClass( classTo );
            $next.addClass( classFrom );

            $current.removeClass( 'da-slide-current' );
            $next.addClass( 'da-slide-current' );

        }

        // fallback
        if( !this.cssAnimations || !this.cssAnimations ) {

            $next.css( 'left', ( d === 'next' ) ? '100%' : '-100%' ).stop().animate( {
                left : '0%'
            }, 1000, function() { 
                _self.isAnimating = false; 
            });

            $current.stop().animate( {
                left : ( d === 'next' ) ? '-100%' : '100%'
            }, 1000, function() { 
                $current.removeClass( 'da-slide-current' ); 
            });

        }

        this._updatePage();

    },
    _updatePage         : function() {

        this.$pages.removeClass( 'da-dots-current' );
        this.$pages.eq( this.current ).addClass( 'da-dots-current' );

    },
    _startSlideshow     : function() {

        var _self   = this;

        this.slideshow  = setTimeout( function() {

            var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
            _self._navigate( page, 'next' );

            if( _self.options.autoplay ) {

                _self._startSlideshow();

            }

        }, this.options.interval );

    },
    page                : function( idx ) {

        if( idx >= this.slidesCount || idx < 0 ) {

            return false;

        }

        if( this.options.autoplay ) {

            clearTimeout( this.slideshow );
            this.options.autoplay   = false;

        }

        this._navigate( idx );

    },
    _loadEvents         : function() {

        var _self = this;

        this.$pages.on( 'click.cslider', function( event ) {

            _self.page( $(this).index() );
            return false;

        });

        this.$navNext.on( 'click.cslider', function( event ) {

            if( _self.options.autoplay ) {

                clearTimeout( _self.slideshow );
                _self.options.autoplay  = false;

            }

            var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
            _self._navigate( page, 'next' );
            return false;

        });

        this.$navPrev.on( 'click.cslider', function( event ) {

            if( _self.options.autoplay ) {

                clearTimeout( _self.slideshow );
                _self.options.autoplay  = false;

            }

            var page = ( _self.current > 0 ) ? page = _self.current - 1 : page = _self.slidesCount - 1;
            _self._navigate( page, 'prev' );
            return false;

        });

        if( this.cssTransitions ) {

            if( !this.options.bgincrement ) {

                this.$el.on( 'webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider', function( event ) {

                    if( event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4' ) {

                        _self.isAnimating   = false;

                    }   

                });

            }
            else {

                this.$el.on( 'webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider', function( event ) {

                    if( event.target.id === _self.$el.attr( 'id' ) )
                        _self.isAnimating   = false;

                });

            }

        }

    }
};

var logError            = function( message ) {
    if ( this.console ) {
        console.error( message );
    }
};

$.fn.cslider            = function( options ) {

    if ( typeof options === 'string' ) {

        var args = Array.prototype.slice.call( arguments, 1 );

        this.each(function() {

            var instance = $.data( this, 'cslider' );

            if ( !instance ) {
                logError( "cannot call methods on cslider prior to initialization; " +
                "attempted to call method '" + options + "'" );
                return;
            }

            if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                logError( "no such method '" + options + "' for cslider instance" );
                return;
            }

            instance[ options ].apply( instance, args );

        });

    } 
    else {

        this.each(function() {

            var instance = $.data( this, 'cslider' );
            if ( !instance ) {
                $.data( this, 'cslider', new $.Slider( options, this ) );
            }
        });

    }

    return this;

};

})( jQuery );

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-06-05
      • 1970-01-01
      • 2020-03-04
      • 1970-01-01
      • 2015-08-14
      • 2017-11-03
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode