ホームページ > 記事 > ウェブフロントエンド > Jquery_jquery に基づく画像スクロール スイッチ
Jquery_jquery に基づく画像スクロール スイッチ
- WBOYオリジナル
- 2016-05-16 17:52:211282ブラウズ
まず、jquery フレームワークを参照する必要があります。
次に、HTML コードを開始します:
コードをコピーします コードは次のとおりです:
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;//安っぽいコードは実行しないでください位置に高さを加えたもの #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)/ /画像ではない場合は、次のコマンドを実行します
{
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();//マウスは再び動きます 実行タイマー
});
各文には明確にコメントが付けられています。ここでは単純な上向き効果を書いているだけなので、コードは最適化されていない可能性があります。主に参考やアイデア用です。
これらのエフェクトをプラグインにカプセル化し、他の指示やエフェクトを記述することができます。
効果を見てください (この記事のスタイルは完全には含まれていません。自分のコンピューターにコピーできます)
}
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 までご連絡ください。