Jquery_jquery に基づく画像スクロールスイッチ-jsチュートリアル-php.cn

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

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

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

href="#" title="">

プロフェッショナルな質問と回答のプラットフォーム
 ああ、よく発達した修道院ですが、離れています
同じ都市にあるアサド産業< /a>
コード

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

ul,img,li,a{

border:0 ; マージン:0; パディング:0 ; リストスタイル:なし; #New_zlMimgMv { ボーダー: 1px 高さ: 192px ;

マージン-ボトム: 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();//マウスは再び動きます 実行タイマー
}); 
 
各文には明確にコメントが付けられています。ここでは単純な上向き効果を書いているだけなので、コードは最適化されていない可能性があります。主に参考やアイデア用です。 
これらのエフェクトをプラグインにカプセル化し、他の指示やエフェクトを記述することができます。 
効果を見てください (この記事のスタイルは完全には含まれていません。自分のコンピューターにコピーできます)

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

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