Question

我基本上希望滑块中的中心图像是其他图像的两倍。我需要能够将活动的类传递给中心图像并将其从最后一个图像中删除。这样中心图像总是两倍大。用我的代码可以做到这一点吗？

＆＃13;

$(document).ready(function(){

  // function active_class(){
  //   $(".active").next().addClass('active');
  //   $(".img_cont").index(1).addClass('jiji');
  // }
  // active_class();
  
  
  var slide_count = $(".carousel li").length;
  var slide_width = $(".carousel li").width();
  var slide_height = $(".carousel li").height();
  var total_width = slide_width * slide_count;
  
  $(".cont").css({ height: slide_height, width: slide_width, paddingLeft: slide_width , paddingRight: slide_width });
  $(".carousel").css({ width: total_width, marginLeft: - slide_width});
  $(".carousel li:last-child").prependTo(".carousel");
  $("#next").css("right", slide_width);
  $("#prev").css("left", slide_width);
  
  function next_slide(){
    $(".carousel").animate({
      left: + slide_width
    }, 400, function(){
      $(".carousel li:last-child").prependTo(".carousel");
      $('.carousel').css('left', 0);
    }
    );
  }
  
  function prev_slide(){
    $(".carousel").animate({
      left: - slide_width
    }, 400, function(){
      $(".carousel li:first-child").appendTo(".carousel");
      $(".carousel").css("left", 0);
    }
    );
  }
  
  $("#next").click(function(){
    next_slide();
  });
  $("#prev").click(function(){
    prev_slide();
  });
  
  var interval_time = 4000; // 1s
  var mouse_hover_flag = false;
  
  $(".cont").hover(function(){
    mouse_hover_flag = true;            
  }, function () {
    mouse_hover_flag = false;
  });

  setInterval(function() {
      if (!mouse_hover_flag) {//if not true
          next_slide();
      }
  }, interval_time);
  
});

＆＃13;

*{
  padding: 0;
  margin: 0;
}

body{
  margin: 0;
  padding: 0;
}

.cont{
  position: relative;
  text-align: center;
  font-size: 0;/*removes white space*/
  margin: 60px auto 0 auto;
  padding: 0;
  overflow: hidden;
}

.carousel{
  position: relative;
  margin: 0;
  padding: 0;
  list-style-type: none;
  height: 100%;
  max-height: 600px;
}

.carousel li{
  float: left;
  width: 750px;
  height: 350px;
}

.carousel li img{
  width: 100%;
  height: auto;
}

#next{
  position: absolute;
  top: 45%;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: blue;
  font-size: 0;
  z-index: 1;
}

#prev{
  position: absolute;
  top: 45%;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: blue;
  z-index: 1;
}

.img_cont{
  transform: scale(0.5);
}

.active{
  transform: scale(1);
}

＆＃13;

<div class="cont">
  <div id="next">
  </div> 
  <div id="prev">
  </div> 
  <ul class="carousel">
    <li class="img_cont active">
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
    </li>
    <li class="img_cont">
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
    </li>
    <li class="img_cont">
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
    </li>
    <li class="img_cont">
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" />
    </li>
  </ul>
</div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

＆＃13;

https://codepen.io/Reece_Dev/pen/OgQLjE

Answer 1

从所有li元素中删除活动类很容易，选择第一个并再次添加该类。

例如：

  function next_slide(){
    $(".carousel").animate({
      left: + slide_width
    }, 400, function(){
      $(".carousel li:last-child").prependTo(".carousel");
      $('.carousel').css('left', 0);

      // Add the following line to prev_slide too:
      $('.carousel li').removeClass('active').eq(0).addClass('active');
    }
    );
  }

将类添加到轮播中的活动幻灯片中

1 个答案: