链接到同一页面上的多个滑块

Question

我总是使用@Sushanth 的这个答案中的脚本——在单页上滑动图像。 这是完美的。

问题，它只适用于每页一个 slider，现在我在一个项目中，我必须放置与按钮相关的不同小滑块，显然，它不起作用，或者更确切地说，只有第一个起作用。 我花了很长时间来理解脚本，正如我在其他答案中所读到的，我想这是为每个 slider 分配不同的 ID，但我找不到解决方案。

在示例代码段中，圆形按钮链接到第一个 slider，即有效的那个。 方形按钮链接到第二个 slider（带有三个幻灯片），但它不起作用。 由于滑块是链接，因此每个 slider 都有自己的一组下一个、上一个和关闭按钮。

 var $first = $('li:first', 'ul'), $last = $('li:last', 'ul'); // Have the first and last li's set to a variable $("#next").click(function() { var $next, $selected = $(".selected"); // get the selected item // If next li is empty, get the first $next = $selected.next('li').length? $selected.next('li'): $first; $selected.removeClass("selected"); $next.addClass('selected'); // hides target $('li').removeClass("linked"); }); $("#prev").click(function() { var $prev, $selected = $(".selected"); // get the selected item // If prev li is empty, get the last $prev = $selected.prev('li').length? $selected.prev('li'): $last; $selected.removeClass("selected"); $prev.addClass('selected'); // hides target $('li').removeClass("linked"); });

 * { text-decoration: none; }.pre, .post, .fstbutton, .scndbutton, .BACK { cursor: pointer; z-index: 1500; color: #C2C6D2; font-size: 3rem; margin-top: 3rem; }.fstbutton:before { font-family: 'Font Awesome 5 free'; content: "\f111"; font-weight: 900; }.scndbutton:before { font-family: 'Font Awesome 5 free'; content: "\f0c8"; font-weight: 900; }.pre:before { font-family: 'Font Awesome 5 free'; content: "\f060"; font-weight: 900; }.post:before { font-family: 'Font Awesome 5 free'; content: "\f061"; font-weight: 900; }.BACK:before { font-family: 'Font Awesome 5 free'; content: "\f00d"; font-weight: 900; } /* pop-up */.popup { position: fixed; top: 0; padding-top: 2rem; width: 100%; height: 100%; display: none; text-align: center; background: #ecf0fa; z-index: 20; opacity: 1; overflow: hidden; }.popup:target { display: block; -webkit-animation-name: fadein 0, 2s; animation-name: fadein; animation-duration: 0.2s; height: 100%; } /*SLIDER*/.SLIDER { position: absolute; top: -1.4rem; right: 7rem; display: flex; gap: 1.5rem; } li { display: none; width: fit-content; height: fit-content; padding: 1rem 2rem; }.selected, .linked:last-child { display: block; } /*FIN SLIDER*/.yl { background: yellow; }.br { background: brown; }.bl { background: blue; }.pi { background: pink; }.re { background: red; }.or { background: orange; }.cy { background: cyan; }.gr { background: green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"> <a class="fstbutton" href="#firstslider"></a> <a class="scndbutton" href="#scndslider"></a> <div id="firstslider" class="popup"> <ul> <li class="linked yl"> <h3>Yellow</h3> </li> <li class="linked bl"> <h3>Blue</li> <li class="linked br"> <h3>Brown</li> <li class="linked cy"> <h3>Cyan</li> <li class="linked gr"> <h3>Green</li> </ul> <div class="SLIDER"> <div id="prev" class="pre"></div> <div id="next" class="post"></div> <div class="BACK" onClick="history.go(-1);return true;"></div> </div> </div> <div id="scndslider" class="popup"> <ul> <li class="linked pi"> <h3>Pink</h3> </li> <li class="linked re"> <h3>Red</li> <li class="linked or"> <h3>Orange</li> </ul> <div class="SLIDER"> <div id="prev2" class="pre"></div> <div id="next2" class="post"></div> <div class="BACK" onClick="history.go(-1);return true;"></div> </div> </div>

Answer 1

最简单的方法是为prev和next元素使用不同的 ID 绑定click事件。

在这里，我使用#prev2和#next2 ，并复制了您的功能，将每组按钮限制为#firstslider和#scndslider

 var $first = $('#firstslider li:first'), $last = $('#firstslider li:last'); var $first2 = $('#scndslider li:first'), $last2 = $('#scndslider li:last'); // Have the first and last li's set to a variable $("#next").click(function() { var $next, $selected = $("#firstslider.selected"); // get the selected item // If next li is empty, get the first $next = $selected.next('li').length? $selected.next('li'): $first; $selected.removeClass("selected"); $next.addClass('selected'); // hides target $('li').removeClass("linked"); }); $("#prev").click(function() { var $prev, $selected = $("#firstslider.selected"); // get the selected item // If prev li is empty, get the last $prev = $selected.prev('li').length? $selected.prev('li'): $last; $selected.removeClass("selected"); $prev.addClass('selected'); // hides target $('li').removeClass("linked"); }); // Have the first and last li's set to a variable $("#next2").click(function() { var $next, $selected = $("#scndslider.selected"); // get the selected item // If next li is empty, get the first $next = $selected.next('li').length? $selected.next('li'): $first2; $selected.removeClass("selected"); $next.addClass('selected'); // hides target $('li').removeClass("linked"); }); $("#prev2").click(function() { var $prev, $selected = $("#scndslider.selected"); // get the selected item // If prev li is empty, get the last $prev = $selected.prev('li').length? $selected.prev('li'): $last2; $selected.removeClass("selected"); $prev.addClass('selected'); // hides target $('li').removeClass("linked"); });

 * { text-decoration: none; }.pre, .post, .fstbutton, .scndbutton, .BACK { cursor: pointer; z-index: 1500; color: #C2C6D2; font-size: 3rem; margin-top: 3rem; }.fstbutton:before { font-family: 'Font Awesome 5 free'; content: "\f111"; font-weight: 900; }.scndbutton:before { font-family: 'Font Awesome 5 free'; content: "\f0c8"; font-weight: 900; }.pre:before { font-family: 'Font Awesome 5 free'; content: "\f060"; font-weight: 900; }.post:before { font-family: 'Font Awesome 5 free'; content: "\f061"; font-weight: 900; }.BACK:before { font-family: 'Font Awesome 5 free'; content: "\f00d"; font-weight: 900; } /* pop-up */.popup { position: fixed; top: 0; padding-top: 2rem; width: 100%; height: 100%; display: none; text-align: center; background: #ecf0fa; z-index: 20; opacity: 1; overflow: hidden; }.popup:target { display: block; -webkit-animation-name: fadein 0, 2s; animation-name: fadein; animation-duration: 0.2s; height: 100%; } /*SLIDER*/.SLIDER { position: absolute; top: -1.4rem; right: 7rem; display: flex; gap: 1.5rem; } li { display: none; width: fit-content; height: fit-content; padding: 1rem 2rem; }.selected, .linked:last-child { display: block; } /*FIN SLIDER*/.yl { background: yellow; }.br { background: brown; }.bl { background: blue; }.pi { background: pink; }.re { background: red; }.or { background: orange; }.cy { background: cyan; }.gr { background: green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"> <a class="fstbutton" href="#firstslider"></a> <a class="scndbutton" href="#scndslider"></a> <div id="firstslider" class="popup"> <ul> <li class="linked yl"> <h3>Yellow</h3> </li> <li class="linked bl"> <h3>Blue</li> <li class="linked br"> <h3>Brown</li> <li class="linked cy"> <h3>Cyan</li> <li class="linked gr"> <h3>Green</li> </ul> <div class="SLIDER"> <div id="prev" class="pre"></div> <div id="next" class="post"></div> <div class="BACK" onClick="history.go(-1);return true;"></div> </div> </div> <div id="scndslider" class="popup"> <ul> <li class="linked pi"> <h3>Pink</h3> </li> <li class="linked re"> <h3>Red</li> <li class="linked or"> <h3>Orange</li> </ul> <div class="SLIDER"> <div id="prev2" class="pre"></div> <div id="next2" class="post"></div> <div class="BACK" onClick="history.go(-1);return true;"></div> </div> </div>