javascript - 单页中的两个图像 slider

Question

您好， friend 们正在尝试使用 jquery 在单个页面中创建两个图像 slider ，但是在浏览器中运行此文件时会遇到一些问题。这是我的代码

html

<div id="projects">
    <div id="completed">
    <div class="button-previous">prev</div>
        <div class="button-next">next</div>
     <div class="slider-wrapper">

            <div class="slider">
          <div class="sp" style="background: blue;">akjdfalfkdj</div>
          <div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
          <div class="sp" style="background: green;" >akjdfalfkdiyukjkhkj</div>
      <div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
            </div>
          </div>



     </div>
     <div id="notcompleted">
         <div class="button-previous-notcmpt">prev</div>
         <div class="button-next-notcmpt">next</div>
     <div class="slider-wrapper">

            <div class="slider">
          <div class="sp-notcmpt" style="background: blue;">akjdfalfkdj</div>
      <div class="sp-notcmpt" style="background: yellow;">akjdfautlfkdkjkhkj</div>
     <div class="sp-notcmpt" style="background: green;" >akjdfalfkdiyukjkhkj</div>
     <div class="sp-notcmpt" style="background: red;">akjdfalfkdkkljjkhkj</div>
            </div>
           </div>

       </div>

..................................................... ...................................................

CSS

    .slider-wrapper 
         {width:300px; height:250px;margin:15px;margin-left:25px  }
    .slider 
       {width:225px; height:225px; position:relative;}
  .sp 
  {width:250px; height:250px; position:absolute;}


  .button-previous 
     {margin-top:120px;float:left;}
  .button-next
      {margin-top:120px;float:right;}
   .button-previous-notcmpt
   {margin-top:120px;float:left}
  .button-next-notcmpt 
      {margin-top:120px;float:right;}
   .sp-notcmpt 
       {width:250px; height:250px; position:absolute;}
   div#completed{
    width: 300px;
    height: 300px;
    float: left;
    border: solid black 1px;
    overflow: hidden;


   } 
    div#notcompleted{
    width: 300px;
    height: 300px;
    float: right;
    border: solid black 1px;

    }

    div#recentprojects{
    height: 35px;
    border: dotted green 0px;
    text-align: center;
    background-color: #0e3e6e;
    color: #ffffff;
    font-family: arial,normal;
    line-height: 33px;
   }

脚本

    $(document).ready(function(){
            if($('#completed')){
            $('.sp').first().addClass('active');
           $('.sp').hide();    
           $('.active').show();

    $('.button-next').click(function(){

    $('.active').removeClass('active').addClass('oldActive');    
                   if ( $('.oldActive').is(':last-child')) {
        $('.sp').first().addClass('active');
        }
        else{
        $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();


    });

       $('.button-previous').click(function(){
    $('.active').removeClass('active').addClass('oldActive');    
           if ( $('.oldActive').is(':first-child')) {
        $('.sp').last().addClass('active');
        }
           else{
    $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp').fadeOut();
    $('.active').fadeIn();
    });
    }
    if($('#notcompleted')){
       $('.sp-notcmpt').first().addClass('active');
       $('.sp-notcmpt').hide();    
       $('.active').show();
    $('.button-next-notcmpt').click(function(){

    $('.active').removeClass('active').addClass('oldActive');    
                   if ( $('.oldActive').is(':last-child')) {
        $('.sp-notcmpt').first().addClass('active');
        }
        else{
        $('.oldActive').next().addClass('active');
        }
    $('.oldActive').removeClass('oldActive');
    $('.sp-notcmpt').fadeOut();
    $('.active').fadeIn();


    });

       $('.button-previous-notcmpt').click(function(){
    $('.active').removeClass('active').addClass('oldActive');    
           if ( $('.oldActive').is(':first-child')) {
        $('.sp-notcmpt').last().addClass('active');
        }
           else{
    $('.oldActive').prev().addClass('active');
           }
    $('.oldActive').removeClass('oldActive');
    $('.sp-notcmpt').fadeOut();
    $('.active').fadeIn();
    });
    }

});

Answer 1

尝试脚本。

 $(document).ready(function(){
            if($('#completed')){
            $('#completed .sp').first().addClass('active');
           $('#completed .sp').hide();    
           $('#completed .active').show();

    $('#completed .button-next').click(function(){

    $('#completed .active').removeClass('active').addClass('oldActive');    
                   if ( $('#completed .oldActive').is(':last-child')) {
        $('#completed .sp').first().addClass('active');
        }
        else{
        $('#completed .oldActive').next().addClass('active');
        }
    $('#completed .oldActive').removeClass('oldActive');
    $('#completed .sp').fadeOut();
    $('#completed .active').fadeIn();


    });

       $('#completed .button-previous').click(function(){
    $('#completed .active').removeClass('active').addClass('oldActive');    
           if ( $('#completed .oldActive').is(':first-child')) {
        $('#completed .sp').last().addClass('active');
        }
           else{
    $('#completed .oldActive').prev().addClass('active');
           }
    $('#completed .oldActive').removeClass('oldActive');
    $('#completed .sp').fadeOut();
    $('#completed .active').fadeIn();
    });
    }

    if($('#notcompleted')){
       $('#notcompleted .sp-notcmpt').first().addClass('active');
       $('#notcompleted .sp-notcmpt').hide();    
       $('#notcompleted .active').show();
    $('#notcompleted .button-next-notcmpt').click(function(){

    $('#notcompleted .active').removeClass('active').addClass('oldActive');    
                   if ( $('#notcompleted .oldActive').is(':last-child')) {
        $('#notcompleted .sp-notcmpt').first().addClass('active');
        }
        else{
        $('#notcompleted .oldActive').next().addClass('active');
        }
    $('#notcompleted .oldActive').removeClass('oldActive');
    $('#notcompleted .sp-notcmpt').fadeOut();
    $('#notcompleted .active').fadeIn();


    });

       $('#notcompleted .button-previous-notcmpt').click(function(){
    $('#notcompleted .active').removeClass('active').addClass('oldActive');    
           if ( $('#notcompleted .oldActive').is(':first-child')) {
        $('#notcompleted .sp-notcmpt').last().addClass('active');
        }
           else{
    $('#notcompleted .oldActive').prev().addClass('active');
           }
    $('#notcompleted .oldActive').removeClass('oldActive');
    $('#notcompleted .sp-notcmpt').fadeOut();
    $('#notcompleted .active').fadeIn();
    });
    }

});

同时检查一下，你已经包含了 jquery 库

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>