ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery_jquery に基づく画像スクロール スイッチ

Jquery_jquery に基づく画像スクロール スイッチ

WBOY
リリース: 2016-05-16 17:52:21
オリジナル
1312 人が閲覧しました

まず、jquery フレームワークを参照する必要があります。

次に、HTML コードを開始します:

コードをコピーします コードは次のとおりです:



  • href="#" title="">






  • ul,img,li,a{
    マージン-ボトム: 12px;
    幅: 446px;
    #New_zlMimgMvBox, #New_zlMimgMvBox img {
    高さ: 160px; > オーバーフロー: 非表示;
    #New_zlMimgMv .imgMvNum a {
    背景: #E6E6E6;
    フロート: 左;行の高さ: 32 ピクセル;
    テキストの装飾: なし;
    カラー: #282828;
    #New_zlMimgMv a .changeThis {
    background: #A29F9F;
    color: #FFFFFF;


    最後に JQ コード:




    コードをコピー


    コードは次のとおりです:


    var imgLength=$("#imgMvCon li").length;// の合計数を取得します。スクロールする要素
    var imgHeight=$("#imgMvCon li").height();//スクロールする必要がある要素の高さを取得します
    var totalHeight=imgLength*imgHeight;//スクロールする必要がある要素の高さの合計
    var mvul=$(" #imgMvCon");
    var Positiontop=0;//初期オフセット位置を定義します 0var linknum=0;//初期値を定義しますボタン切り替えインデックス制御用
    var mvTimer;//タイミングを設定 Container
    mvul.parent().css({"position":"relative"})//コンテナのCSSを設定
    mvul.css({"position":"absolute"});//上記と同じ
    $(".imgMvNum a").eq(linknum).addClass("changeThis");//スタイルを最初のボタン
    function imgMv(){
    if(imgLength>1)/ /画像ではない場合は、次のコマンドを実行します
    {
    positiontop=positiontop imgHeight;//安っぽいコードは実行しないでください位置に高さを加えたもの
    if(positiontop==totalHeight)// オフセット値が次の値に等しい場合
    {
    positiontop=0; >linknum ;//一度実行すると、ボタンの切り替えの制御に使用されるインデックスが 1 ずつ増加しますif(linknum>> =imgLength)//インデックスがスクロール要素の合計長以上の場合、 Index back to 0 { linknum=0; } mvul.animate({top:-(linknum*imgHeight )},400);// animate 属性を使用してスクロールを実装します。 linknum*imgHeight' はボタンとの同期を容易にします$(".imgMvNum a").removeClass("changeThis");//スタイルを削除します
    $(".imgMvNum a").eq(linknum).addClass( "changeThis");//スタイルを追加
    }
    }
    function startMv(){
    mvTimer=setInterval(imgMv, 4000);//タイマー関数
    }
    startMv( );//実行タイマー
    $(".imgMvNum a").each(function(){//トラバースボタン
    $ (this).mouseover(function(){//マウスオーバーボタン
    clearInterval (mvTimer);//タイマーをクリア
    linknum=$(this).index();//マウスオーバーボタンは現在のボタンインデックスのlinknumを設定します
    $(".imgMvNum a").removeClass("changeThis" );
    $(this).addClass("changeThis");
    mvul.animate({top:-( linknum*imgHeight)},300);// animate 属性を使用してスクロールを実装します、'linknum *imgHeight' はボタンとの同期を容易にします
    }).mouseout(function(){
    startMv();//マウスは再び動きます 実行タイマー
    });

    各文には明確にコメントが付けられています。ここでは単純な上向き効果を書いているだけなので、コードは最適化されていない可能性があります。主に参考やアイデア用です。
    これらのエフェクトをプラグインにカプセル化し、他の指示やエフェクトを記述することができます。
    効果を見てください (この記事のスタイルは完全には含まれていません。自分のコンピューターにコピーできます)
    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート