Question

因此，作为学习jquery的一种方法，我制作了自己的滑块，其中每个图像向左滑动都会产生不错的效果，这是因为我更改了绝对定位的图像容器的left属性。

但是我无法移动它，我要做的是捕获滑块中每个图像的宽度并相应地移动容器。

我的代码：

$(document).ready(function() {
  var interval = 2000; //will move to left 450px each X seconds
  var sliders = $('.slider_image'); //counts number of sliders
  var image_width = $('.slider_image').width();
  var index = 0;
  var show_index = 0;
  var scrolledPx = 0;

  setInterval(function() {

    if (scrolledPx >= image_width * sliders.length - 1) {

      $('.sliders_container').animate({
        'left': '0px'
      }, 2000);
      scrolledPx = 0;

    } else {

      $('.sliders_container').animate({
        'left': '-= ' + image_width + ''
      }, 1000);
      scrolledPx += image_width;
    }

  }, 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 red;
  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');">1</div>
    <div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">2</div>
    <div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">3</div>
    <div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">4</div>
    <div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">5</div>
    <div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');">6</div>
  </div>
</section>

Answer 1

<style>
.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 red;
  background-size: cover;
}

.slider_image {display: none}

/* Slideshow container */
.sliders_container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

</style>
</head>
<body>

<div class="section_slider_marg_items_container sliders_container">

 <div class="section_slider_marg_item slider_image">
  <img src="res1.jpg"></div>

<div class="section_slider_marg_item slider_image">
  <img src="res1.jpg"></div>



<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>


<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slider_image");

  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }

  slides[slideIndex-1].style.display = "block";  

}
</script>

检查一下，让我知道它是否有效

简单的jQuery滑块问题

1 个答案: