制作jQuery轮播自动滑动

Question

所以我创建了我的图像滑块，当单击其中一个按钮时，它会设置为滑动。但现在我正在努力自动制作幻灯片，当鼠标悬停在侧面时停止。你能告诉我或者至少告诉我怎么做吗？感谢

＆＃13;

＆＃13;

$(document).ready(function(){
  var slide_count = $(".carousel li").length;
  var slide_width = $(".carousel li").width();
  var slide_height = $(".carousel li").height();
  var cont_width = slide_width * slide_count;
  
  $(".cont").css({ height: slide_height, width: slide_width});
  $(".carousel").css({ width: cont_width, marginLeft: - slide_width });
  $(".carousel li:last-child").prependTo(".carousel");
  
  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();
  });
  
});

＆＃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;
}

＆＃13;

<div class="cont">
  <div id="next">
  </div> 
  <div id="prev">
  </div> 
  <ul class="carousel">
    <li>
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
    </li>
    <li>
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
    </li>
    <li>
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
    </li>
    <li>
      <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;

＆＃13;

＆＃13;

Answer 1

这是我编辑的版本。我们必须使用setInterval函数进行自动幻灯片。接下来，我们将悬停事件监听器添加到轮播。如果我们正在悬停，我们的变量preventSlide将变为true，如果我们停止悬停，变量将变为false，这意味着自动滑动。

var preventSlide = false;
$(".carousel").hover(function() {
        preventSlide = true;
}, function() {
    preventSlide = false;
});

setInterval(function () {
    if (!preventSlide)
        next_slide();
}, 3500);

$(document).ready(function(){
  var slide_count = $(".carousel li").length;
  var slide_width = $(".carousel li").width();
  var slide_height = $(".carousel li").height();
  var cont_width = slide_width * slide_count;
  
  $(".cont").css({ height: slide_height, width: slide_width});
  $(".carousel").css({ width: cont_width, marginLeft: - slide_width });
  $(".carousel li:last-child").prependTo(".carousel");
  
  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);
    }
    );
  }

  var preventSlide = false;
  $(".carousel").hover(function() {
        preventSlide = true;
  }, function() {
        preventSlide = false;
  });

  setInterval(function () {
if (!preventSlide)
      next_slide();
  }, 3500);

  /*$("#next").click(function(){
    next_slide();
  });
  $("#prev").click(function(){
    prev_slide();
  });*/
  
});

*{
  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;
}

<div class="cont">
  <div id="next">
  </div> 
  <div id="prev">
  </div> 
  <ul class="carousel">
    <li>
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
    </li>
    <li>
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
    </li>
    <li>
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
    </li>
    <li>
      <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>

Answer 2

你可以通过创建一个setInterval()来实现这一点，你可以在x秒内调用你的滑块函数，并在它上面放一个标记，如果鼠标悬停在它上面就不会运行。

像

这样的东西

var SECONDS_INTERVAL = 1000; // 1s
var mouseHoverFlag = false;

setInterval(function() {
    if (!mouseHoverFlag) {
        next_slide();
    }
}, SECONDS_INTERVAL);

每当用户将鼠标悬停在包含它的div上时，将mouseHoverFlag更改为true。

$('.carousel').hover(function() {
    mouseHoverFlag = true;
}, function () {
    mouseHoverFlag = false;
});

你可以使用setTimeout并在每次鼠标进入时杀死它，但我认为这太重了，性能明智。

Answer 3

您应该为自动幻灯片添加setInterval和clearInterval。还可以计算当前动画中的幻灯片。简言之，将

var timer;
var rotator = function(){
    nextSlide();
};
timer = setInterval(rotator, 5000); // your desired timer
$('.carousel').hover(function(){ clearInterval(timer), function(){ timer = setInterval(rotator, 5000); });

您可以更好地优化代码，但基本解决方案就是这样。

Answer 4

$(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });

check here

Answer 5

您可以将时间间隔设置为轮播中的选项。您也可以在悬停时设置暂停选项。

$("#myCarousel").carousel({interval: 500, pause: "hover"});