4

li要素のスライドを作成する方法を見つけようとしています。それらをすべて1行で作成し（私のフィドルを参照）、ul幅に合わせることができます。しかし、[次へ] ボタンをクリックすると、右にスライドして非表示を表示しliます。

私のフィドル: http://jsfiddle.net/5cmR7/

似たようなフィドル: http://jsfiddle.net/L5yEA/

編集：私はこのようなものが欲しいのですが、より良い方法で構築され、[次へ]をクリックするとより正確になります。

4

2 に答える 2

3

必要なのはこれだけです：

jsBin デモ

var liN = $('ul.shop-groups li').length;
var galW = $('.content').width();    
var curr = 0; // Set current 'li' slide

function animate(){  
  var setCurr= (curr===-1) ? (curr = liN-1) : (curr = curr%liN);   
  $('ul.shop-groups').stop().animate({left: -(galW*curr) },1200);  
}

$('#prev, #next').click(function(){
  var who= (this.id==='next') ? curr++ : curr-- ;
  animate();
});

IDボタンに を与えるだけです：

<input id="prev" type="button" value="PREVIOUS"/>
<input id="next" type="button" value="NEXT"/>

そして、変更された CSS は次のとおりです。

.content {
    position:relative; /**/
    width:500px;
    height:250px;
    margin-right:auto;
    margin-left:auto;
    background-color:#555; 
    overflow:hidden; /**/
}

ul.shop-groups {
    position:absolute; /**/
    left:0px;
    background-color: #DDDDDD;
    border-bottom: 1px solid #CCCCCC;
    width: 999999px;
}
ul.shop-groups a {
    color: #fff;
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 20px;
    min-width: 20px;
    padding: 2px 15px;
    text-align: center;
}
li.shop-items {
    position:relative;/**/
    float:left;/**/
    border: solid 1px #d45;
    float : left;
    background-color:blue;
    height:248px;    /**/
    width:498px;     /**/
}
于 2012-06-28T22:15:41.183 に答える
0

これをチェックしてください、それはあなたが何を意味するのですか？

http://jsfiddle.net/5cmR7/5/

于 2012-06-28T22:03:05.727 に答える