jquery_jquery に基づいてカルーセル効果を実装する
カルーセルは、jquery を学習するときに実装される 2 番目の動的エフェクトであり、学習に最も時間がかかるエフェクトでもあります。カルーセルを導入する過程では、常にさまざまな問題に遭遇し、多くの人に相談し、何度も質問してきました。今日は、カルーセルをすぐに作成できるとは大胆に言いません。
エッセイを通していくつかの思考プロセスを記録したいと思っています。
1 つ目は HTML 構造、単純なカルーセル、単一画像のシームレスなカルーセルで、主に 3 つの層に分かれています: div>ul>li、および li 内の img 画像。
次に、css スタイル: div 固定幅と高さ、オーバーフロー: 非表示; ul の幅は動的に取得することをお勧めします (次のステップは li の取得方法についてです)。 、ul 上で順番に配置できるように、float をクリアすることを忘れないでください (クリア: 両方)。
重要なのは jquery メソッドで、主に使用されるメソッドは animate()、setInterval()、hover() です。メソッドを記述する前に、動的な効果のロジックを明確にしましょう。画像はループ内で右から左にスライドし、最後の画像がスライドすると最初の画像が表示されます。
1. 長さと幅の li の数を取得します
var len=$('li').length,
liWidth=$('li').width,
シームレスなカルーセルなので、画像が最後の画像にスライドしたときに、最初の画像に自然に移行するにはどうすればよいでしょうか。したがって、最初の部分を複製して li
の最後に追加する必要があります。$('li:first').clone().appendTo('ul')
2. ul の幅を取得します。ul の幅は、すべての li の幅に複製された li の幅を加えたものに等しくなります。
ulWidth=liWidth*(len+1)
準備は完了したようですので、次のステップは彼を動かしてみることです。最初に思い浮かぶのは animate() メソッドです。
animate(properties [, period ] [, easing ] [, complete ] ),
最初のパラメータのプロパティ: CSS 属性と値オブジェクト。上下または左右のアニメーションの効果を決定します。
2 番目のパラメーターの継続時間: アニメーションが完了するまでの時間、デフォルトは 400、単位はミリ秒です。
3 番目のパラメータ イージング: アニメーションの遷移に使用されるイージング関数。デフォルトはスイング (リニア、スイング) です。このパラメータは通常は使用されません。4 番目のパラメーター complete: アニメーションの完了後に実行される操作を指します。
私たちのアニメーションは右から左なので、ul のマージン左の値を変更することで実現できます
$('ul').animate({ 'marign-left': -liWidth*index },3000,function(){ if(index==len){ index=0; $('ul').css({'margin-left':'0px'}) } })
これには別の隠れた危険がありますが、それについては今は触れません。
次のステップでは、マウスが div から離れると、画像が自動的に再生されます。これは、hover() と setInterval() を使用するためです
setInterval() は、W3C によって次のように説明されています。指定された期間 (ミリ秒単位) に従って関数を呼び出すか、式を計算します。この関数は、clearInterval() が呼び出されるかウィンドウが閉じるまで継続的に呼び出されます。
var autoPlay; $('div').hover(function(){ clearInterval(autoPlay); },function(){ autoPlay=setInterval(function(){ $('ul').animate({ 'marign-left': -liWidth*index },3000,function(){ if(index==len){ index=0; $('ul').css({'margin-left':'0px'}); index++; } }); },3000) }).trigger('mouseleave');
この問題は昨日解決しましたが、最後のピクチャを実行するとすぐにインデックスが0になり、その後2回実行されることになるため、この判定ではインデックスが0のときに1を加える必要があります。 、index++を判定条件に入れます。
昨日発見した別の問題があります。このカルーセルには 2 つの時間があり、1 つはアニメーションの実行時間であり、もう 1 つは再生時間です。その理由は、前者の時間が後者の時間よりも小さい必要があるためです。実行順序が上から下にある場合、時間が一致している場合、または後者の時間が前者よりも小さい場合、この時間差内ではアニメーションは判定条件に入ることができずに再生が継続されるため、カルーセルは失敗します。今日はここまでです。次回共有するときは、左右の矢印とホバー ドットのカルーセル効果を追加します。
完全なコードを添付します:
<html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>轮播</title> <style> body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4{margin:0;padding:0;list-style:none;} body,button,input,select,textarea{font:12px Arial, Helvetica, sans-serif;color:#333;} input,select,textarea{font-size:100%;} .clearfix:after{display:block;content:".";height:0;visibility:hidden;clear:both;font-size:0;line-height:0;} .clearfix{*zoom:1;} .big-screen{width: 100%; height: 400px; overflow: hidden; margin: 40px 0;} .pic-list{height: 400px;} .pic-list li{float: left; width: 1920px; height: 400px;} </style> </head> <body> <div class="big-screen"> <ul class="pic-list clearfix"> <li> <a href="javascript:;"> <img src="http://fed.yhd.cn:9000/1920x400/27ae60xfff" alt="picture" width="1920" height="400"/> </a> </li> <li> <a href="javascript:;"> <img src="http://fed.yhd.cn:9000/1920x400/ae273axfff" alt="picture" width="1920" height="400"/> </a> </li> <li> <a href="javascript:;"> <img src="http://fed.yhd.cn:9000/1920x400/2757aexfff" alt="picture" width="1920" height="400"/> </a> </li> <li> <a href="javascript:;"> <img src="http://fed.yhd.cn:9000/1920x400/ae7d27xfff" alt="picture" width="1920" height="400"/> </a> </li> </ul> </div> </body> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var ul=$('.pic-list'), li=ul.find('li'), liW=li.outerWidth(true), liLen=li.length, index=0, autoPlay; li.first().clone().appendTo(ul); ul.css({'width':liW*(liLen+1),'margin-left':-liW*index}); function play(){ if(!ul.is('animated')){ ul.stop().animate({ 'margin-left':-liW*index },480,function(){ if(index>liLen){ index=0; ul.css({'margin-left':-liW*index}); index++; } }); } } $('.big-screen').hover(function(){ clearInterval(autoPlay); },function(){ autoPlay=setInterval(function(){ play(); index++; },500) }).trigger('mouseleave'); }) </script> </html>

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

フロントエンドのVSCodeと同様に、パネルドラッグアンドドロップ調整機能の実装を調べます。フロントエンド開発では、VSCODEと同様のVSCODEを実装する方法...
