一页上有多个滑块:如何使箭头定位一组特定的幻灯片

我正在尝试创建一个在同一页面上包含多个图像滑块的作品集网站。我让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>

相关内容

最新更新

热门标签：