javascript - 一页上有多个滑块:如何使箭头瞄准一组特定的幻灯片？

我正在尝试创建一个投资组合网站，该网站在同一页面上包含多个图像滑块。我让HTML，CSS和jQuery适用于单个滑块，但是当我添加另一个具有相同类的滑块时，事情就变得很时髦了。

我的问题：如何使左右箭头仅针对它们所连接的幻灯片？

可能的修复：

-是否需要重新组织HTML，使幻灯片与箭头同级？不过，它们已经包含在同一个“投资组合项目” 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>

最佳答案

我想你应该像这样在上下文中使用jQuery

var currentContext = $（this）.closest（'。slider-container'）;

因为现在，当您执行操作时：var currentSlide = $（'。active-slide'）;实际上，这会选择两个活动的滑块，而您只想激活单击的那个。

var main = function(){

	$('.slide:first-child').fadeIn(600).addClass('active-slide');

	//right arrow!

    $('.portfolio-item .right-arrow').click( function(){
        // this saves context
        var currentContext = $(this).closest('.slider-container');
        // this select active-slide of the context
        var currentSlide= currentContext.find('.active-slide');

        //var currentSlide=$('.active-slide');
        var nextSlide=currentSlide.next();

        if(nextSlide.length === 0) {
            //nextSlide=$('.slide:first-child');
            // this selects the next slide of the context
            nextSlide= currentContext.find('.slide:first-child');
        }

        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');

    });

	//left arrow!

    $('.portfolio-item .left-arrow').click( function(){
        // this saves context
        var currentContext = $(this).closest('.slider-container');
        // this selects the current active slide of the context
        var currentSlide= currentContext.find('.active-slide');

        //var currentSlide=$('.active-slide');
        var prevSlide = currentSlide.prev();

        if(prevSlide.length === 0) {
           //prevSlide=$('.slide:last-child');
           // this selects the previous slide of the context
           prevSlide= currentContext.find('.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>