javascript - 单页中的两个图像滑块

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

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();
    });
    }

});

最佳答案

尝试脚本。

 $(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>

关于javascript - 单页中的两个图像滑块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24238262/