1
私はタイマーの画像スライダーとしてリスト項目をループするのに同じコードを使用しました。今度は、「次へ」と「前へ」ボタンを追加してユーザーエクスペリエンスを向上させたいと思います。私はスタックの周りを見て、いくつかのことを試して、これに対する解決策を考え出すことができません。jQueryスライダー - 次と前のボタンを追加
<div class="container">
<div class="tabs">
<nav>
<ul id="tabs">
<li><a href="javascript:;" class='current'>Tab1</a></li>
<li><a href="javascript:;">Tab1</a></li>
<li><a href="javascript:;">Tab2</a></li>
<li><a href="javascript:;">Tab3</a></li>
<li><a href="javascript:;">Tab4</a></li>
<li><a href="javascript:;">Tab5</a></li>
<li><a href="javascript:;">Tab6</a></li>
</ul>
</nav>
<!-- end .tabs -->
</div>
<div class="content">
<div id="feature_list">
<div id="prev" class="arrows prev"><a href="#">PREV</a></div>
<ul id="output">
<li><a href="#" target="_parent" class="corresp">Output1</a></li>
<li><a href="#" target="_parent">Output2</a></li>
<li><a href="#" target="_parent">Output3</a></li>
<li><a href="#" target="_parent">Output4</a></li>
<li><a href="#" target="_parent">Output5</a></li>
<li><a href="#" target="_parent">Output6</a></li>
<li><a href="#" target="_parent">Output7</a></li>
</ul>
<div id="next" class="arrows next"><a href="#">NEXT</a></div>
</div>
<!-- end .content -->
</div>
今すぐOK jQueryの隣にあります。ここではまず
はHTMLコードです。しかし、最初に私は説明する必要があります、コードは、各アンカータグで 'current'クラスを追加して削除する最初のものから、id "tabs"でリストをループします。その後、 '出力'リスト内の対応する項目が検索され、その出力が表示されます。ここにコードがあります：
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.featureList = function(options) {
var tabs = $(this);
var output = $(options.output);
new jQuery.featureList(tabs, output, options);
return this;
};
//Loops through tab to next and displays cooresponding output
$.featureList = function(tabs, output, options) {
function slide(nextli) {
if (typeof nextli == "undefined") {
nextli = visible_item + 1;
nextli = nextli >= total_items ? 0 : nextli;
prevli = visible_item - 1;
prevli = prevli >= total_items ? 0 : prevli;
}
tabs.removeClass('current').filter(":eq(" + nextli + ")").addClass('current');
output.stop(true, true).filter(":visible").removeClass('cooresp').css({zIndex:10}).fadeOut();
output.filter(":eq(" + nextli + ")").addClass('cooresp').css({zIndex:15}).fadeIn(function() {
visible_item = nextli;
});
}
var options = options || {};
var total_items = tabs.length;
var visible_item = options.start_item || 0;
options.pause_on_hover = options.pause_on_hover || true;
options.transition_interval = options.transition_interval || 4000;
output.hide().eq(visible_item).show();
tabs.eq(visible_item).addClass('current');
tabs.click(function() {
if ($(this).hasClass('current')) {
return false;
}
slide(tabs.index(this));
});
if (options.transition_interval > 0) {
var timer = setInterval(function() {
slide();
}, options.transition_interval);
if (options.pause_on_hover) {
tabs.mouseenter(function() {
clearInterval(timer);
}).mouseleave(function() {
clearInterval(timer);
timer = setInterval(function() {
slide();
}, options.transition_interval);
});
}
}
};
})(jQuery);
</script>
<script language="javascript">
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 0
}
);
var next = $("#feature_list #next a");
var prev = $("#feature_list #prev a");
var tabs = $('#tabs li a');
next.click(function(){
var tabli = $('#tabs li a.current');
//var current = $('.selectoption li:visible');
var output = $("#output li.cooresp");
var currentli = $('#tabs li a.current');
output.stop(true, true).css({zIndex:10}).fadeOut();
output.prev().css({zIndex:15}).fadeIn(function() {
tabsli.prev('a').addClass('current');
});
});
prev.click(function(){
var tabli = $('#tabs li a.current');
//var current = $('.selectoption li:visible');
var output = $("#output li.cooresp");
var currentli = $('#tabs li a.current');
output.stop(true, true).css({zIndex:10}).fadeOut();
output.prev().css({zIndex:15}).fadeIn(function() {
tabli.stop(true, true).removeClass('current');
$('#tabs li a').prev().addClass('current');
});
});
});
</script>
誰かが「次へ」ボタンをクリックすると、前の画像が表示されるようにしました。これは機能します（しかし、それはラウンドアラウンドの方法かもしれません）。 .prev関数と.next（）関数を使用しようとするときの主な問題は、現在のクラスが前後に移動するのに失敗しました。私は両方のリストが常にそれぞれのリストの同じ番号になるようにしたい。 'current'クラスがfirst：またはlast：のいずれかにある場合は、タイマーのようにループします。
誰でも助けていただければ幸いです。さらに詳しい情報が必要な場合は、すぐに尋ねてください。前もって感謝します！ [OK]を
EDIT
ので、私はnext.clickを取り出してちょうどtabs.clickの下で、メインコードエリアに戻ってそれを入れてみました：
next.click(function() {
currentli = $('a.current');
nextli = currentli.parent().siblings().next('li').find('a');
console.log(currentli.parent().siblings().next('li').find('a'));
slide(tabs.index(nextli));
});
このALMOST作品！唯一の問題は、変数 'nextli'が静的であり、その値がDOMロード時に決定されることです。次のボタンがクリックされるたびにではありません。クリックごとに「nextli」を評価するにはどうすればよいですか？