jquery - jQuery タブ スライダーが必要

Question

Web サイトを開発していて、タブ リンクとスライダー機能を備えたタブ スライダーが必要です。

ユーザーが下のリンクをクリックするとコンテンツが変化し、ユーザーが次と前のボタンをクリックすると同じ機能になります。

画像を見て理解を深めてください。肯定的な返信をお待ちしております。

Answer 1

以下がお役に立てば幸いです。

<script type="text/javascript">

$(document).ready(function(){
// Enable or leave the keys
$('.slider').each(function(){
    if($('li:last',this).width()+$('li:last',this).offset().left-$('li:first',this).offset().left>$('div',this).width()){
        // enable the buttons
        $('button',this).css('display','inline');
        $('button.prev',this).css('visibility','hidden');
    }
});


    $(".slider .next").click(function(){
    //Remove the exist selector
    //Set the width to the widest of either
    var $div =$('div',this.parentNode)
        ,maxoffset = $('li:last',$div).width()+$('li:last',$div).offset().left - $('li:first',$div).offset().left - $div.width()
        ,offset = Math.abs(parseInt( $('ul',$div).css('marginLeft') ))
        ,diff = $div.width();

    if( offset >= maxoffset )
        return;
    else if ( offset + diff >= maxoffset ){
        diff = maxoffset - offset + 20;
        // Hide this
        $(this).css('visibility','hidden');
    }
    // enable the other
    $('.prev', this.parentNode).css('visibility','visible');        

    $("ul", $(this).parent() ).animate({
        marginLeft: "-=" + diff
    },400, 'swing');
});

$(".slider .prev").click(function(){

    var offset = Math.abs(parseInt( $('ul',this.parentNode).css('marginLeft') ));
    var diff = $('div',this.parentNode).width();
    if( offset <= 0 )
        return;
    else if ( offset - diff <= 0 ){
        $(this).css('visibility','hidden');     
        diff = offset;
    }
    $('.next', this.parentNode).css('visibility','visible');

    $("ul",$(this).parent()).animate({
        marginLeft: '+='+diff
    },400, 'swing');
});
});

</script>
<style>
 .slider .next, .slider .prev{
display:none;
background-color:white;
border:0;
font:bold 20px Helvetica;
color:#bbb;
float:left;
padding:0;
margin:0;
}
    .slider .next{
float:right;
}
.slider div{
overflow:hidden;
text-align:left;
height:none;
margin:0;
padding:0;
}
    .slider div ul{
    width:3000px;// set to an arbitary high value
    overflow:hidden;
    margin:0;
    padding:0;
    margin-left:0;
}
    .slider div ul li{
        display:inline;
        padding:10px;
        margin:0;
        background:#eee;
        border:1px solid #ddd;
     }
</style>

<div class='slider'>
<button class='prev'>&lt;</button>
<button class='next'>&gt;</button>
<div>

    <ul>
      <li>Apples</li>
      <li>Pears</li>
      <li>Stairs</li>
      <li>Cares</li>
      <li>Elephants</li>
      <li>Spanish Chickens</li>
      <li>Marlborough House</li>
      <li>Thameside Tavern</li>
   </ul>
</div>

参照: http://perplexed.co.uk/1991_jquery_scroll_tabs_like_browser_tabs.htm