ホームページ > ウェブフロントエンド > jsチュートリアル > JQuery_jqueryによる商品広告効果

JQuery_jqueryによる商品広告効果

WBOY
リリース: 2016-05-16 18:14:12
オリジナル
1189 人が閲覧しました

効果図は次のとおりです:
JQuery_jqueryによる商品広告効果
アニメーション効果の紹介: この一連の広告の効果は、ページを開いた後に写真が自動的に再生されることです (合計 5 枚の写真)。標準に属する場合は 1 ~ 5。右下の 1、2、3、4、5 のリストに移動すると、見たい写真に自由に切り替えることができます。画像の切り替えは下から上になります。
JQuery_jqueryによる商品広告効果
制作のアイデア: まず、これらの 5 つの写真を ul の 5 つの li リストに入れ、
《1》の写真の合計数を見つけます。そして、1.2.3.4 をクリックすると。 5の場合、対応する番号が渡され、対応する画像が表示されます。
《2》属性マークを配置したら、アニメーションを停止します(clearIntval()を使用できます)。属性マークを移動した場合は、setIntval(function, time)を使用して、この関数を3000ミリ秒ごとに実行できます。
《3》このアニメーション機能を完了します。この関数では、まずこのアニメーション領域 (.slider) の高さを取得します。次に、animate カスタム アニメーション関数を使用して、TOP 位置の変更を実現します。そして、現在の li の数字に強調表示効果を追加します。
《4》もう一つ、ここのTOP変更は通常通り、カレントエリアの親タグ(.ad)に必ず「position:relative;」を設定すればOKです。本番コードは次のとおりです:

1》HTML 構造は次のとおりです:

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


    image/ads/1.gif"/> ;

  • < li>JQuery_jqueryによる商品広告効果
  • JQuery_jqueryによる商品広告効果
    /li>

" >
  • 1

  • 2

  • 3
  • gt;
  • 4
  • ;
  • /li>



    2》jQuery コードは次のとおりです。




  • コードをコピー コードは次のとおりです: //ハイパーリンク テキスト プロンプト
    $(function(){
    var len = $(".num >li").length;
    varindex = 0;
    var adTimer;

    $(" .nu​​m li").mouseover(function(){
    Index = $(".num li").index(this); // ここの「this」は「 $(this) 」に置き換えることができます
    showImg(index);
    }).eq(0) .mouseover(); //ページを開いたときに、最初の画像がアニメーションをトリガーする属性として配置されます。 >
    //<広告画像> ; を使用します。アニメーションを停止するには属性がスライドインし、アニメーションを開始するには属性がスライドアウトします。
    $(".ad").hover(function() {
    clearInterval(adTimer);
    },function() {
    adTimer = setInterval(function(){
    showImg(index);
    index ;
    if(index == len ){ Index=0; }
    } , 3000);
    }).trigger("mouseleave");
    })

    // 指定されたインデックスを介して別の画像を表示します🎜>
    function showImg(index){
    var adHeight = $(".content_right .ad").height();
    $(".slider").stop(true,false).animate ( {"top": -adHeight*index},1000 ) ;
    $(".num li").removeClass("on")
    .eq(index).addClass("on"); 🎜>}



    3》対応する CSS スタイル:





    コードをコピー


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

    .content_right{
    background:#eee;
    border : 1px solid #AAAAAA;
    width: 586px;
    float:left;
    }


    .content_right .ad {
    margin-bottom:10px;
    width:586px;
    height:150px;
    overflow:hidden;
    position:relative;
    }

    .content_right .slider,
    .content_right .num {
    position:absolute;
    }

    .content_right .slider li{
    list-style:none;
    display:inline;
    }

    .content_right .slider img{
    width:586px;
    height:150px;
    display:block;
    }
    .content_right .num{
    right:5px;
    bottom:5px;
    }
    .content_right .num li{
    float: left;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    color: #FF7300;
    background-color: #fff;
    border: 1px solid #FF7300;
    overflow: hidden;
    margin: 3px 1px;
    cursor: pointer;
    }
    .content_right .num li.on{
    width: 21px;
    height: 21px;
    line-height: 21px;
    color: #fff;
    background-color: #FF7300;
    font-size: 16px;
    margin: 0 1px;
    border: 0;
    font-weight: bold;
    }
    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート