一页上有多个滑块：如何使箭头瞄准一组特定的幻灯片？
[英]Multiple sliders on one page: How to make arrows target a specific set of slides?
问题描述
我正在尝试创建一个投资组合网站，该网站在同一页面上包含多个图像滑块。 我让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>
1 个解决方案
解决方案1
0 2015-01-14 15:45:31
我想你应该像这样在上下文中使用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>
我正在页面中创建多个滑块...但如果幻灯片的数量彼此不同，则无法获得正确的停止位置
[英]I am creating multiple sliders in a page… but not getting the correct stop position if the number of slides are different from each other
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.