如何使用js在滑块中定位图像

Question

我正在制作一张幻灯片，其中包含3幅宽度为700像素的图像，我想从jquery中设置每张图像的“左”位置，以便图像滑入，显示当前图像并隐藏其他图像。

这是代码。

$(document).ready(function() {

  //calculating the no. of photos using each funct. Each func will detect the total imgs.
  $('.marquee_container .slide').each(function(index) {

    //setting the photowidth according to the container width
    var photoWidth = $('.marquee_container').width();

    //calculating the photoposition
    var photoPosition = index * photoWidth;

    //setting the left position of the photos
    $('.slide').css({
      'left': photoPosition
    });

    //caculating the width of the div depending on the photos
    $('.holder').css({
      'width': photoWidth + photoPosition
    });


  });

  //generating navigation links
  //calculating the no. of marquee_photos divs using the each func
  //appending html code inside the marquee_nav
  //the marquee_nav links will appear according to the number of marquee_photos divs, using the each function
  $('.slide').each(function(index) {
    $('.marquee_nav').append('<a href="#" class="marquee_nav_item"></a>');
  });
});

.marquee_container {
  width: 700px;
  height: 350px;
  overflow: hidden;
  margin: 0px 0px 30px 0px;
  padding: 0px;
}
.holder {
  overflow: hidden;
  position: relative;
  width: 700px;
  height: 350px;
}
.slide {
  position: absolute;
  top: 0px;
  left: 0px;
}
.marquee_photos {
  overflow: hidden;
}
.marquee_photos img {
  display: block;
}
.marquee_caption {
  width: 700px;
  margin: 0px;
  padding: 15px 0px 10px 0px;
  color: #fff;
  position: absolute;
  top: 350px;
  left: 0px;
  background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
  width: 410px;
  padding: 0px 0px 0px 25px;
}
.marquee_nav {
  position: absolute;
  bottom: 5px;
  right: 0;
}
.marquee_nav .marquee_nav_item {
  color: #fff;
  text-decoration: none;
  background: url(images/template/nav_buttons.png) no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  display: block;
  width: 17px;
  height: 18px;
  float: left;
  margin: 0 4px;
}
.marquee_nav .marquee_nav_item:hover {
  background: url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item:selected {
  background: url(images/template/nav_buttons.png) no-repeat -50px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="marquee_container">
  <div class="holder">
    <div class="slide">
      <img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
      <div class="marquee_caption">
        <div class="marquee_caption_content">
          <p>Content goes here</p>
        </div>
      </div>
    </div>
    <div class="slide">
      <img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
      <div class="marquee_caption">
        <div class="marquee_caption_content">
          <p>Content goes here</p>
        </div>
      </div>
    </div>
    <div class="slide">
      <img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
      <div class="marquee_caption">
        <div class="marquee_caption_content">
          <p>Content goes here</p>
        </div>
      </div>
    </div>
  </div>
  <div class="marquee_nav">
  </div>
</div>

我可以动态添加宽度，但左边的所有图像都等于最后一张图像，即左边：1400

从js你可以看到我使用索引计算了每个照片位置，但我仍然无法得到结果。

Answer 1

<强> TLDR

您滥用.each()循环。

要访问.each()循环内的值，您必须使用value参数。

$('.marquee_container .slide').each(function (index, value) {
    console.log($('.slide')); // All slides on the page.
    console.log($(value)); // A value for current iteration
});

详细说明

当你指定一个类时，jQuery中使用的Sizzle选择器引擎返回匹配元素的集合，并且你的DOM包含这个类的多个元素。

通过在jQuery Collection上调用.each(callback)，您基本上可以告诉JavaScript为集合中的每个元素调用callback函数。 callback函数接受两个参数：index, value

其中index - 数组或对象中的当前索引value - 来自集合的单个值。

通过应用$('.slide').css()，您可以更改集合中所有元素的CSS属性。要为每个元素指定特定位置，您需要通过访问$(value)来与每个单独的元素进行交互。

<强>修复

请使用您的图片试用此演示：

＆＃13;

＆＃13;

$(document).ready(function() {

  //calculating the no. of photos using each funct. Each func will detect the total imgs.
  $('.marquee_container .slide').each(function(index, value) {

    //setting the photowidth according to the container width
    var photoWidth = $('.marquee_container').width();

    //calculating the photoposition
    var photoPosition = index * photoWidth;

    //setting the left position of the photos
    $(value).css({
      'left': photoPosition
    });

    //caculating the width of the div depending on the photos
    $('.holder').css({
      'width': photoWidth + photoPosition
    });


  });

  //generating navigation links
  //calculating the no. of marquee_photos divs using the each func
  //appending html code inside the marquee_nav
  //the marquee_nav links will appear according to the number of marquee_photos divs, using the each function
  $('.slide').each(function(index) {
    $('.marquee_nav').append('<a href="#" class="marquee_nav_item"></a>');
  });
});

＆＃13;

.marquee_container {
  width: 700px;
  height: 350px;
  overflow: hidden;
  margin: 0px 0px 30px 0px;
  padding: 0px;
}
.holder {
  overflow: hidden;
  position: relative;
  width: 700px;
  height: 350px;
}
.slide {
  position: absolute;
  top: 0px;
  left: 0px;
}
.marquee_photos {
  overflow: hidden;
}
.marquee_photos img {
  display: block;
}
.marquee_caption {
  width: 700px;
  margin: 0px;
  padding: 15px 0px 10px 0px;
  color: #fff;
  position: absolute;
  top: 350px;
  left: 0px;
  background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
  width: 410px;
  padding: 0px 0px 0px 25px;
}
.marquee_nav {
  position: absolute;
  bottom: 5px;
  right: 0;
}
.marquee_nav .marquee_nav_item {
  color: #fff;
  text-decoration: none;
  background: url(images/template/nav_buttons.png) no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  display: block;
  width: 17px;
  height: 18px;
  float: left;
  margin: 0 4px;
}
.marquee_nav .marquee_nav_item:hover {
  background: url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item:selected {
  background: url(images/template/nav_buttons.png) no-repeat -50px 0;
}

＆＃13;

<div class="marquee_container">
  <div class="holder">
    <div class="slide">
      <img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
      <div class="marquee_caption">
        <div class="marquee_caption_content">
          <p>Content goes here</p>
        </div>
      </div>
    </div>
    <div class="slide">
      <img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
      <div class="marquee_caption">
        <div class="marquee_caption_content">
          <p>Content goes here</p>
        </div>
      </div>
    </div>
    <div class="slide">
      <img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
      <div class="marquee_caption">
        <div class="marquee_caption_content">
          <p>Content goes here</p>
        </div>
      </div>
    </div>
  </div>
  <div class="marquee_nav">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;