画像カルーセル効果を実現するJqueryコード(1)_javascriptスキル
この記事はよく書かれていないので、専門家にアドバイスを求めたいと思います。早速、レンダリングを見てみましょう。
最初は初期化部分です。最初のカルーセル画像を除くすべての画像を非表示にし、進むボタンと戻るボタンを非表示にし、最初のインデックス ボタンをアクティブにします。
イベント部分: jquery の hover() メソッドを介してマウスをバインドし、イベント処理を終了します。 jquery の binding() メソッドは、前方、後方反転、およびカルーセル コントロールのマウス クリック イベント処理をバインドします: pre() 、 next()、 play()、start()は自動回転を開始し、stop()は自動回転を停止します。
次の記事は、さまざまな効果、便利な構成、拡張性をカスタマイズできる純粋な jquery カルーセル プラグインです。
全体のコードは次のとおりです:
index.html [html] view plaincopy <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轮播效果图 </title> <script type="text/javascript" src="scripts/jquery-1.9.1.js"></script> <style type="text/css"> * { padding: 0px; margin: 0px; } a { text-decoration: none; } ul { list-style: outside none none; } .slider, .slider-panel img, .slider-extra { width: 650px; height: 413px; } .slider { text-align: center; margin: 30px auto; position: relative; } .slider-panel, .slider-nav, .slider-pre, .slider-next { position: absolute; z-index: 8; } .slider-panel { position: absolute; } .slider-panel img { border: none; } .slider-extra { position: relative; } .slider-nav { margin-left: -51px; position: absolute; left: 50%; bottom: 4px; } .slider-nav li { background: #3e3e3e; border-radius: 50%; color: #fff; cursor: pointer; margin: 0 2px; overflow: hidden; text-align: center; display: inline-block; height: 18px; line-height: 18px; width: 18px; } .slider-nav .slider-item-selected { background: blue; } .slider-page a{ background: rgba(0, 0, 0, 0.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color: #fff; text-align: center; display: block; font-family: "simsun"; font-size: 22px; width: 28px; height: 62px; line-height: 62px; margin-top: -31px; position: absolute; top: 50%; } .slider-page a:HOVER { background: rgba(0, 0, 0, 0.4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .slider-next { left: 100%; margin-left: -28px; } </style> <script type="text/javascript"> $(document).ready(function() { var length, currentIndex = 0, interval, hasStarted = false, //是否已经开始轮播 t = 3000; //轮播时间间隔 length = $('.slider-panel').length; //将除了第一张图片隐藏 $('.slider-panel:not(:first)').hide(); //将第一个slider-item设为激活状态 $('.slider-item:first').addClass('slider-item-selected'); //隐藏向前、向后翻按钮 $('.slider-page').hide(); //鼠标上悬时显示向前、向后翻按钮,停止滑动,鼠标离开时隐藏向前、向后翻按钮,开始滑动 $('.slider-panel, .slider-pre, .slider-next').hover(function() { stop(); $('.slider-page').show(); }, function() { $('.slider-page').hide(); start(); }); $('.slider-item').hover(function(e) { stop(); var preIndex = $(".slider-item").filter(".slider-item-selected").index(); currentIndex = $(this).index(); play(preIndex, currentIndex); }, function() { start(); }); $('.slider-pre').unbind('click'); $('.slider-pre').bind('click', function() { pre(); }); $('.slider-next').unbind('click'); $('.slider-next').bind('click', function() { next(); }); /** * 向前翻页 */ function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex + length) % length; play(preIndex, currentIndex); } /** * 向后翻页 */ function next() { var preIndex = currentIndex; currentIndex = ++currentIndex % length; play(preIndex, currentIndex); } /** * 从preIndex页翻到currentIndex页 * preIndex 整数,翻页的起始页 * currentIndex 整数,翻到的那页 */ function play(preIndex, currentIndex) { $('.slider-panel').eq(preIndex).fadeOut(500) .parent().children().eq(currentIndex).fadeIn(1000); $('.slider-item').removeClass('slider-item-selected'); $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); } /** * 开始轮播 */ function start() { if(!hasStarted) { hasStarted = true; interval = setInterval(next, t); } } /** * 停止轮播 */ function stop() { clearInterval(interval); hasStarted = false; } //开始轮播 start(); }); </script> </head> <body> <div class="slider"> <ul class="slider-main"> <li class="slider-panel"> <a href="http://www.jb51.net" target="_blank"><img src="/static/imghw/default1.png" data-src="images/1.jpg" class="lazy" alt="画像カルーセル効果を実現するJqueryコード(1)_javascriptスキル" title="画像カルーセル効果を実現するJqueryコード(1)_javascriptスキル"></a> </li> <li class="slider-panel"> <a href="http://www.jb51.net" target="_blank"><img src="/static/imghw/default1.png" data-src="images/2.jpg" class="lazy" alt="画像カルーセル効果を実現するJqueryコード(1)_javascriptスキル" title="画像カルーセル効果を実現するJqueryコード(1)_javascriptスキル"></a> </li> <li class="slider-panel"> <a href="http://www.jb51.net" target="_blank"><img src="/static/imghw/default1.png" data-src="images/3.jpg" class="lazy" alt="画像カルーセル効果を実現するJqueryコード(1)_javascriptスキル" title="画像カルーセル効果を実現するJqueryコード(1)_javascriptスキル"></a> </li> <li class="slider-panel"> <a href="http://www.jb51.net" target="_blank"><img src="/static/imghw/default1.png" data-src="images/4.jpg" class="lazy" alt="画像カルーセル効果を実現するJqueryコード(1)_javascriptスキル" title="画像カルーセル効果を実現するJqueryコード(1)_javascriptスキル"></a> </li> </ul> <div class="slider-extra"> <ul class="slider-nav"> <li class="slider-item">1</li> <li class="slider-item">2</li> <li class="slider-item">3</li> <li class="slider-item">4</li> </ul> <div class="slider-page"> <a class="slider-pre" href="javascript:;;"><</a> <a class="slider-next" href="javascript:;;">></a> </div> </div> </div> </body> </html>
この時点で、単純な jquery カルーセル効果が完成しました。もちろん、改善の余地はまだたくさんあります。

ホット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を実装する方法...
