Question

以下是我的代码

＆＃13;

var current_slide = 1,
    animation_time = 1000,
    pause          = 3000,
    slide_container = $('.slide_container'),
    interval,
    height          = slide_container.height(),
    slides          = slide_container.children();
    
    function autoslide(){
      
      interval = setInterval(function(){
        slides.animate({'margin-top':'-='+height}, function(){
         current_slide++;
          if(current_slide===slides.length){
          
            current_slide=1;
            slides.css('margin-top', 0);
          }
        });
      },pause);
    }
    
    autoslide();

＆＃13;

.my_slider{
  height:100vh;
  width:100vw;
  background-color:grey;
  position:relative;
}

.left_slider{
  width:50%;
  height:100%;
  background-color:orange;
  position:relative;
  float:left;
  overflow:hidden;
}

.slide_1{
  height:100%;
  width:100%;
  background-color:yellow;
}

.slide_2{
  height:100%;
  width:100%;
  background-color:pink;
}

.slide_3{
  height:100%;
  width:100%;
  background-color:orange;
}

.right_slider{
  width:50%;
  height:100%;
  position:relative;
  float:left;
}

.top_slider{
  height:50%;
  background-color:magenta;
  overflow:hidden;
}

.bottom_slider{
  height:50%;
  width:100%;
  overflow:hidden;
}

h1{
  margin:0 auto;
  text-align:center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='my_slider'>
  <div class ='left_slider slide_container'>
    <div class = 'slide_1'><h1>SLIDER 1</h1></div>
    <div class = 'slide_1'><h1>SLIDER 2</h1></div>
    <div class = 'slide_1'><h1>SLIDER 3</h1></div>

  </div>
  
  <div class = 'right_slider slide_container'>
    <div class='top_slider'>
      <div class='slide_2'><h1>SLIDER 4</h1></div>
      <div class='slide_2'><h1>SLIDER 5</h1></div>
    </div>
    
    <div class='bottom_slider slide_container'>
      <div class='slide_3'><h1>SLIDER 6</h1></div>
      <div class='slide_3'><h1>SLIDER 7</h1></div>
    </div>
    
  </div>
</section>

＆＃13;

我正在尝试实现一个滑块，其中每个滑块滑入（通过margin-top）并在滑块长度的末尾重新启动。但是，我被困在以下事情中

幻灯片位于不同尺寸的不同DIV中。我想获得每个div的高度，以便它可以用于margin-top。
我想将每个div独立于其他人。意思是，每个div中的幻灯片在不同的时间移动。

我完全陷入困境，有人可以帮助我吗？

此致

Answer 1

不完全是您尝试解决此问题的方式，但您可以通过这种方式创建滑块。

＆＃13;

// Code goes here

$(document).ready(function() {
  var current_slide = 0,
    animation_time = 1000,
    pause = 3000,
    leftSlider = $('.slide_1'),
    rightSlider = $('.slide_2'),
    bottomSlider = $('.slide_3');

  function autoslide(elements, interval) {
    for (var i = 0; i < elements.length; i++) {
      //adding fade class for effect.
      $(elements[i]).css('display', 'none').addClass('fade');
    }
    current_slide++;
    if (current_slide > elements.length) {
      current_slide = 1;
    }
    $(elements[current_slide - 1]).css('display', 'block');
    setTimeout(autoslide.bind(null, elements, interval), interval);
  }
  autoslide(leftSlider, 2000);
  autoslide(rightSlider, 3000);
  autoslide(bottomSlider, 4000);
});

＆＃13;

/* Styles go here */
.my_slider{
  height:100vh;
  width:100vw;
  background-color:grey;
  position:relative;
}

.left_slider{
  width:50%;
  height:100%;
  background-color:orange;
  position:relative;
  float:left;
  overflow:hidden;
}

.slide_1{
  height:100%;
  width:100%;
  background-color:yellow;
}

.slide_2{
  height:100%;
  width:100%;
  background-color:pink;
}

.slide_3{
  height:100%;
  width:100%;
  background-color:orange;
}

.right_slider{
  width:50%;
  height:100%;
  position:relative;
  float:left;
}

.top_slider{
  height:50%;
  background-color:magenta;
  overflow:hidden;
}

.bottom_slider{
  height:50%;
  width:100%;
  overflow:hidden;
}

h1{
  margin:0 auto;
  text-align:center;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <section class='my_slider'>
  <div class ='left_slider slide_container'>
    <div class = 'slide_1'><h1>SLIDER 1</h1></div>
    <div class = 'slide_1'><h1>SLIDER 2</h1></div>
    <div class = 'slide_1'><h1>SLIDER 3</h1></div>

  </div>
  
  <div class='right_slider slide_container'>
    <div class='top_slider'>
      <div class='slide_2'><h1>SLIDER 4</h1></div>
      <div class='slide_2'><h1>SLIDER 5</h1></div>
    </div>
    
    <div class='bottom_slider slide_container'>
      <div class='slide_3'><h1>SLIDER 6</h1></div>
      <div class='slide_3'><h1>SLIDER 7</h1></div>
    </div>
    
  </div>
</section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>

</html>

＆＃13;

注意，这里我使用display属性隐藏并显示每个div而不是margin，并使用css进行淡入淡出效果。

用jquery实现一个滑块

1 个答案: