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

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

レポ：チームメイトを復活させる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

4週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7364

15

Java チュートリアル

1628

14

CakePHP チュートリアル

1353

52

Laravel チュートリアル

1266

25

PHP チュートリアル

1214

29

もっと見る