0

要素の現在の位置を理解するjQueryの方法を見つけることができないようです。以下のhtmlとcss、jQueryを使用していくつかのマークアップをスクロールします（ギャラリーのように-ただし、プラグインは使用したくありません）が、最後と最初の位置を見つける必要があるため、誰かがページからコンテンツを継続的にスクロールできないようにします-現在アクションを適用するときに親コンテナに色を付けているだけですが、ライブでこれを交換して、ページネーション/スクロールボタンを表示またはグレーアウトしません。

スクロールは 209px または -209px で調整することで機能しますが、最初と最後の要素 (li) の位置を理解していません。以前のliがなくなった場合、またはその逆の場合は、以前のボタンの動作を停止しようとしています。動的に吐き出されるので、これにはいくつでも li が含まれる可能性があります。フィドルの URL も添付: http://jsfiddle.net/jambo/zLSUT/ このデモで画像が機能しないことをお詫びします。要約すると、表示するコンテンツがなくなる方向でページネーションを停止する必要があります。それが理にかなっていることを願っています、事前に感謝します。

CSS

    .smartH{
    float: left; position: relative;
    width:10000px; height: 80px; padding: 5px 0;
    font-family: arial;
    background: #fff;
    }
    .smartH a{
    float: left;
      text-decoration: none; cursor:pointer;
    }
    .smartH img{
    float: left;
    width: 100px; height: 80px;
    border: none;
    }
      .smartH .title{
     float: right;
      margin: 0 5px; width:90px;
    font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left;
    }
    .smartH .text{
    float: right;
    margin: 5px 5px 0; width:90px; 
    font-size: 12px; color: #000; line-height: 1.1; text-align: left;
    }

    .smartAd{
    float:left;
    width:627px; overflow: hidden;
     }

     .smartH li{
    position:relative;
    float:left; display: inline;
    height:80px; width:200px; padding:0 4px 0 5px;
    list-style-type: none;
     }
     .smartAd .paginate{
    float:right
     }
     .smartAd i{
    cursor:pointer;
    }

jQuery

    $( function () {
    var posF = $(".smartH li.first").position(); 
    var posL = $(".smartH li.last").position();     

    $("a#next").click( function () {
        $(".smartH li").stop().animate({
        left: "-=209px",
        }, 500 );
        if (posL.left == -627){
            $(".smartH").css("background", "blue");   
        }
        return false;
    });
    $("a#prev").click( function () {
        $(".smartH li").stop().animate({
        left: "+=209px",
        }, 500 );
        if (posF.left == 0){
           $(".smartH").css("background", "green");   
        }

        return false;
     }); 

    });

html

<div class="smartAd">
<ul class="smartH"><!-- posit abs?  -->
    <li class="first">
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
            <p class="title">Call for a free quote today</p>
            <p class="text">Best value blinds in Lincolnshire!</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/coach.gif" alt="coach" />
            <p class="title">Experience great days out</p>
            <p class="text">Great value coach trips</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="coffee" />
            <p class="title">Need beans?</p>
            <p class="text">We have a great variety of beans at great prices</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/creditcard.gif" alt="credit card" />
            <p class="title">Got bad credit?</p>
            <p class="text">We can help you boost your rating</p>
        </a>
    </li>
    <li>
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/mobility.gif" alt="mobility" />
            <p class="title">Struggling to get around?</p>
            <p class="text">Great value scooters!</p>
        </a>
    </li>
    <li class="last">
        <a href="http://www.google.com" target="_blank">
            <img src="http://advertising.co.uk/wallpaper/plumber.gif" alt="plumber" />
            <p class="title">Got a leak?</p>
            <p class="text">Ring for reliable and friendly plumbers</p>
        </a>
    </li>       
</ul><!-- // ul.smartH -->
<span class="paginate">
    <a href="" class="icon" id="prev">Prev 1-</a>
    <a href="" class="icon" id="next">- Next 1</a>      
</span>
  </div>
4

2 に答える 2

0

最初と最後の子を指定するために間違った構文を使用しています。次のようにする必要があります。

var posF = $(".smartH li:first-child").position(); 
var posL = $(".smartH li:last-child").position();

CSS 疑似セレクターの行に沿って続く場合。

于 2013-04-09T13:10:00.590 に答える