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

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

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

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

<div id="New_zlMimgMv">
<div class="imgMvCon">
<li> href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li>
<li><a href= "#" title= ""><img src="New_zlimgMv.jpg" alt="" /></a></li>
<li><a href="# " title="" ></ul>
</div>
<div class="imgMvNum">
<a href="javascript:;">プロフェッショナルな質問と回答のプラットフォーム
<a href="javascript:;" style="max-width:90%">ああ、よく発達した修道院ですが、離れています</a>
<a href="javascript:;">同じ都市にあるアサド産業< /a>
</ div> コード


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

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

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