【发布时间】：2015-03-12 20:24:49
【问题描述】：
我正在尝试创建一个投资组合网站，该网站在同一页面上包含多个图像滑块。我让 HTML、CSS 和 jQuery 为单个滑块工作，但当我添加另一个滑块时——具有相同的类——事情变得很时髦。
我的问题：如何使左右箭头仅针对它们所连接的幻灯片？
可能的修复：
-我需要重新组织 HTML 以使箭头与幻灯片同级吗？不过，它们已经包含在同一个“portfolio-item”div 中。
-我需要在 jQuery 中使用“this”和/或“each”吗？我尝试在不同的位置使用“this”和“each”选择器，但没有运气。我是新手，所以我可能用错了。
附加的代码正在运行，但箭头正在移动文档中的所有图像，而不仅仅是它们各自滑块上的图像。
感谢您的帮助！！
瑞恩
var main = function(){
$('.slide:first-child').fadeIn(600).addClass('active-slide');
//right arrow!
$('.portfolio-item .right-arrow').click( function(){
var currentSlide=$('.active-slide');
var nextSlide=currentSlide.next();
if(nextSlide.length === 0) {
nextSlide=$('.slide:first-child');
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
//left arrow!
$('.portfolio-item .left-arrow').click( function(){
var currentSlide=$('.active-slide');
var prevSlide = currentSlide.prev();
if(prevSlide.length === 0) {
prevSlide=$('.slide:last-child');
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
});
}
$(document).ready(main);@charset "UTF-8";
/* CSS Document */
.slider-container {
display: block;
position:relative;
width: 100%;
max-width:600px;
background-color: black;
margin: 0% 0% 1% 0%;
overflow:hidden;
float:left;
}
.slider {
position:relative;
padding-top: 45%;
z-index:0;
}
ul.slides {
z-index:1;
list-style-type:disc;
display:block;
position:absolute;
padding:0;
margin:0;
top:0;
left:0;
width:100%;
height:100%;
}
.active-slide {
display:block;
margin:0 auto;
}
.slide {
display:none;
position:absolute;
width:100%;
height:100%;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
overflow:hidden;
}
.slide img{
margin:0;
position:absolute;
width:100%;
z-index:2;
left:0;
}
.arrow {
position:absolute;
top:42%;
width:5%;
opacity: 0.7;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
z-index:3;
}
.left-arrow {
left:1%;
}
.right-arrow {
right:1%;
}
.arrow:hover {
opacity:1;
cursor:pointer;
}
@media (max-width:886px) {
.slider-container {
max-width:none;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="content">
<div class="portfolio-item" id="woll">
<div class="slider-container">
<div class="slider"></div>
<img class="arrow left-arrow" src="http://authenticid.co/img/leftarrow.png" />
<img class="arrow right-arrow" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" />
<ul class="slides">
<li class="slide img-1"><img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll-brainstorm.jpg?w=986&h=632&crop=1"></li>
<li class="slide img-2"><img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll-spread.png?w=521&h=658&crop=1"></li>
<li class="slide img-3"><img src="https://ryanachtman.files.wordpress.com/2014/01/wollwoll_empowerment-email.png?w=461&h=658&crop=1"></li>
</ul>
</div>
</div>
<div class="portfolio-item" id="jennyandshawn">
<div class="slider-container">
<div class="slider"></div>
<img class="arrow left-arrow" src="http://authenticid.co/img/leftarrow.png">
<img class="arrow right-arrow" src="http://www.clker.com/cliparts/9/N/a/Q/C/n/white-arrow-right-md.png">
<ul class="slides">
<li class="img-1 slide"><img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-wedding_small_1.jpg?w=1000&h=&crop=1"></li>
<li class="img-2 slide"><img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-save-the-date.jpg?w=1000&h=&crop=1"></li>
<li class="img-3 slide"><img src="https://ryanachtman.files.wordpress.com/2014/09/jenny_shawn-table-number.jpg?w=1000&h=&crop=1"></li>
<li class="img-4 slide"><img src="Jenny&Shawn/138.jpg"></li>
<li class="img-5 slide"><img src="https://ryanachtman.files.wordpress.com/2014/06/138_21.jpg?w=1000&h=&crop=1"></li>
</ul>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="slider.js"></script>
</body>
</html>【问题讨论】：
标签： javascript jquery css this each