如何使用JS将图像放置在滑块中

Question

我正在创建一个包含3张宽度为700px的图像的幻灯片，我想设置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
});

详细说明

jQuery中使用的Sizzle选择器引擎在指定一个类时会返回匹配元素的集合，并且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>