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

幅: 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)/ /画像ではない場合は、次のコマンドを実行します
{

}
}
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();//マウスは再び動きます 実行タイマー
});

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