Question

所以我有一个想法，就是尝试制作一个图像滑块，而不是淡入淡出，而只是逐个移动，而是增加450px（每个图像滑块的宽度）。

但是，我在为实现这一目标而苦苦挣扎，我想检查一下滑块是否位于最后一个，以便滑块返回到第一个并重新开始。

这是我到目前为止想出的代码：

$(document).ready(function(){
    var interval = 5000;//will move to left 450px each X seconds
    var sliders = $('.slider_image');//counts number of sliders
    var index = 0;
    var show_index = 0;

    setInterval(function() {
        if(show_index == (sliders.length- 1))
        {
            $('.sliders_container').animate({ 'left': '0px'}, 2000);
        }
		else
        {	
            $('.sliders_container').animate({ 'left': '+=450px'}, 1000);
        }
    }, interval);
});

/*SECTION SLIDER MARG START*/
.section_slider_marg_maincontainer{width:100%; height:275px; outline:2px solid white; position:relative;  overflow:hidden;}
.section_slider_marg_items_container{width:auto; height:100%; position:absolute; top:0px; left:0px; display:flex; }
.section_slider_marg_item{height:100%; width:450px; outline:2px solid white; background-size:cover; }
/*SECTION SLIDER MARG END*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section_slider_marg_maincontainer" style="">
    <div class="section_slider_marg_items_container sliders_container" style="">
	    <div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
	    <div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
		<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
		<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
	    <div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
		<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
    </div>
</section>

Answer 1

我建议为此使用Slick JQuery库。您可以在这里查看：

http://kenwheeler.github.io/slick/

我编辑了他们提供的index.html文件，这就是我最终的目的（仅当您下载了Slick库后，此文件才有效）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">



  </style>
</head>
<body>

  <section class="carousel">
   
      <img src="http://placehold.it/350x300?text=1">

      <img src="http://placehold.it/350x300?text=2">

      <img src="http://placehold.it/350x300?text=3">

      <img src="http://placehold.it/350x300?text=4">

      <img src="http://placehold.it/350x300?text=5">

      <img src="http://placehold.it/350x300?text=6">

      <img src="http://placehold.it/350x300?text=7">

      <img src="http://placehold.it/350x300?text=8">

      <img src="http://placehold.it/350x300?text=9">

  </section>


  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {
        $(".carousel").slick({
            dots: true
      });
    });
</script>

</body>
</html>

Answer 2

就像汤姆斯所说的那样，每次设置动画时，都应该增加一个变量以保持跟踪。

这可能不是最优雅的解决方案，但是它使用相同的代码设置。

$(document).ready(function(){

var interval = 5000;//will move to left 450px each X seconds
var sliders = $('.slider_image');//counts number of sliders
var index = 0;
var show_index = 0;
var scrolledPx = 0;

setInterval(function() {

    if(scrolledPx >= 450 * sliders.length - 1) {

        $('.sliders_container').animate({ 'left': '0px'}, 2000);
        scrolledPx = 0;

    }

    else{

        $('.sliders_container').animate({ 'left': '+=450px'}, 1000);
        scrolledPx += 450;
    }

}, interval);
});

通过更改左侧绝对位置来

2 个答案: