javascript - 如何使用js在 slider 中定位图像

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>

我可以动态添加宽度，但所有图像的左侧位置都等于最后一张图像，即 left: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
});

详细解释

Sizzle 选择器引擎，用于 jQuery 返回匹配元素的集合，当您指定一个类，并且您的 DOM 包含多个具有此类的元素时。

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

index — 数组或对象中的当前索引，value — 集合中的单个值。

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

修复

请用您的图像尝试这个演示:

$(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>');
  });
});

.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;
}

<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>