タオバオスライドショーのJS実装方法effect_javascriptスキル
実装のアイデア:
1. for ループは、数字ボタンにクリック イベントを追加します。
2. for ループは最初にボタンのスタイルをクリアし、次に現在のスタイルを設定します。
3. カスタム属性インデックス aBtn[i].index=i aBtn[2]=2 を各ボタンに追加します。2 番目のボタンを 2 番目の画像に対応させる場合は、モーション フレームを使用して UL を変更します。画像の高さが 150 ピクセルであるため、大きな画像は毎回 -150 ピクセル移動します。 n枚目の画像に移動すると-150*nになります。
4. 自動再生用に変数を定義します。現在のイメージを now now=this.index に割り当てます。
5. 自動再生関数を定義します。 now 次の画像、最後の画像に到達したと判断した場合、最初の画像である 0 に設定します。 if(now==aBtn.length)
6. タイマーを定義し、2 秒ごとに自動再生関数を呼び出します。
7. マウスが画像をポイントするとタイマーがクリアされます。
8. マウスが画像から離れるとタイマーが開始します。
<script><br> ウィンドウ。 onload=function ()<br> {<br> var oDiv=document.getElementById('play');<br> var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');<br> var oUl=oDiv.getElementsByTagName('ul')[0];<br> var now=0;<br><br> for(var i=0;i<abtn.length> { <br> aBtn[i].index=i;<br> aBtn[i].onmouseover=function()<br> {<br> now=this.index; // 現在の値が now<br> に割り当てられます。 tab();<br> }<br> };<br><br> function tab()<br> { for(var i=0;i<abtn.length> {<br> aBtn [i ; -150*now}); // モーション フレームワークを使用して、UL の TOP を現在の番号*-150 に設定します。 3 番目の画像は 2*-150<br> };<br><br> function next( )<br>ワンピース<br> }<br> tab(); //画像を最初の画像に戻して移動を続けます<br> };<br><br> var timer=setInterval(next,2000) ; //2 秒 画像を自動的に切り替える<br><br> oDiv.onmouseover=function()<br> {<br> clearInterval(timer) //タイマーをクリア<br> };<br><br> oDiv. onmouseout=関数( ; <br>完全なコード:<br><br><br><br><br>コードをコピー<br><br><br> コードは次のとおりです:<br><div class="codebody" id="code52143"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" コンテンツ="text/html; charset=utf-8" /><br> <title>淘宝幻灯片上下滑動效果 —— www.zhinengshe.com —— 智能课堂</title><br> <link href="css.css" rel="stylesheet" type="text/css" /><br> <script src="baseCommon.js"></script>
<script><br> window.onload=function()<br> {<br> var oDiv=document.getElementById('play');<br> var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li ');<br> var oUl=oDiv.getElementsByTagName('ul')[0];<br> var now=0;<br><br> for(var i=0;i<aBtn.length;i ) <br> {<br> aBtn[i].index=i;<br> aBtn[i].onmouseover=function()<br> {<br> now=this.index; //当前值赋给now<br> tab();<br> }<br> };<br><br> function tab()<br> { <br> for(var i=0;i< ;aBtn .length;i ) <br> {<br> aBtn[i].className=''; // 全て按钮的样式清空<br> };<br> aBtn[now].className='active'; //当前按钮样式设置<br> startMove(oUl,{top:-150*now}); //アニメーションフレームハンドルULのTOP設定は現在の数*-150、第三张图片就は2*-150<br> };<br><br> function next()<br> {<br> now ; //切换图片<br> if(now==aBtn.length) //如果到達最終最終一张图片<br> {<br> now=0; // 把图片拉回第一张<br> }<br> tab(); // ハンドル图片拉回第一张後继续运動<br> };<br><br> var timer=setInterval(next,2000); //2秒自動切换图片<br><br> oDiv.onmouseover=function()<br> {<br> clearInterval(timer); //清除タイム器<br> };<br><br> oDiv.onmouseout=function()<br> {<br> timer=setInterval(next,2000); //开启タイム器<br> };<br> };<br> </script>
- 1
- 2
- 3
- 4
- 5
< /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）
ホットトピック
7621
15
1389
52
89
11
31
136
ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する
Apr 03, 2024 am 08:13 AM
スマートフォンの画面に緑色の線が表示されるというトラブルに遭遇したことがある方もいると思いますし、見たことはなくても、関連する写真をインターネット上で見たことがあるはずです。では、スマートウォッチの画面が白くなってしまう状況に遭遇したことはありますか？ CNMOは4月2日、海外メディアから、Redditユーザーがサムスンウォッチシリーズのスマートウォッチの画面が白くなっている写真をソーシャルプラットフォームで共有したことを知った。ユーザーは、「出発時に充電していましたが、戻ってきたらこのようになっていました。再起動しようとしましたが、再起動プロセス中も画面はまだこのままでした。」Samsung Watch スマートウォッチの画面が白くなりました。 Reddit ユーザーはスマート ウォッチを指定していません。特定のモデルです。しかし、写真から判断すると、Samsung Watch5のはずです。以前、別のRedditユーザーも報告しました
PPT スライドに七角形を挿入する方法の紹介
Mar 26, 2024 pm 07:46 PM
1. PPT スライド文書を開き、PPT の左側にある [アウトライン、スライド] 列で、基本 [図形] を挿入するスライドをクリックして選択します。 2. 選択後、PPT上部の機能メニューバーの[挿入]メニューを選択し、クリックします。 3. [挿入]メニューをクリックすると、機能メニューバーの下に[挿入]サブメニューバーが表示されます。 [挿入]サブメニューバーの[図形]メニューを選択します。 4. [形状]メニューをクリックすると、プリセット形状タイプの選択ページが表示されます。 5. 形状タイプの選択ページで、[7 角形] 形状を選択し、クリックします。 6. クリックした後、マウスをスライド編集インターフェイスに移動し、マウスを押して描画し、描画が完了したらマウスを放します。 [7角形]図形の挿入が完了します。
九州風神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル
Mar 28, 2024 am 11:11 AM
ASSASSINといえば、プレイヤーの皆さんは必ず『アサシン クリード』に登場するマスターアサシンを思い浮かべると思いますが、彼らは熟練しただけではなく、「闇に身を捧げ、光に仕える」という信条を持っています。 - アプライアンス ブランド DeepCool の冷却ラジエーターが互いに一致します。このたび、シリーズ最新作「ASSASSIN4S」が登場し、上級者に新たな空冷体験をもたらす『スーツの暗殺者 アドバンスト』。外観はディテールに富んでいます. Assassin 4S ラジエーターはダブルタワー構造 + シングルファン内蔵設計を採用しています. 外側は立方体状のフェアリングで覆われており, 全体的な印象が強いです. ホワイトとブラックの2色が用意されています.さまざまな色に合う色。
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
PHP と JS を使用して株価ローソク足チャートを作成する方法
Dec 17, 2023 am 08:08 AM
PHP と JS を使用して株のローソク足チャートを作成する方法。株のローソク足チャートは、株式市場で一般的なテクニカル分析グラフィックです。始値、終値、最高値、株価などのデータを描画することで、投資家が株式をより直観的に理解するのに役立ちます。株価の最低価格、価格変動。この記事では、PHP と JS を使用して株価のローソク足チャートを作成する方法を、具体的なコード例とともに説明します。 1. 準備 開始する前に、次の環境を準備する必要があります。 1. PHP を実行するサーバー 2. HTML5 および Canvas をサポートするブラウザー 3
株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます
Dec 17, 2023 pm 06:55 PM
株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています
春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です
Apr 17, 2024 pm 05:07 PM
春の到来とともにあらゆるものが生き返り、あらゆるものが生命力と活力に満ち溢れます。この美しい季節、家庭生活に彩りを加えるにはどうすればよいでしょうか? Haqu H2 プロジェクターは、絶妙なデザインと超コストパフォーマンスで、この春に欠かせない美しさになりました。コンパクトでありながらスタイリッシュなH2プロジェクター。リビングルームのテレビキャビネットの上に置いても、寝室のベッドサイドテーブルの隣に置いても、美しい風景になります。乳白色のマットな質感のボディは、プロジェクターの高級感を演出するだけでなく、触り心地も向上させたデザインです。ベージュのレザー風の素材が全体の外観に温かみとエレガントさを加えます。この色と素材の組み合わせは、現代の住宅の美的傾向に準拠しているだけでなく、住宅に統合することもできます。
Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度
Mar 28, 2024 pm 03:20 PM
コンパクトなサイズで究極の独自の美しさを追求する多くのプレイヤーを魅了するITXプラットフォームは、製造プロセスの改善と技術の進歩により、インテルの第14世代CoreおよびRTX40シリーズのグラフィックスカードの両方がITXプラットフォーム上で強みを発揮することができ、ゲーマーも SFX 電源にはより高い要件があります。ゲーム愛好家である Huntkey は、高性能要件を満たす ITX プラットフォームにおいて、最大 750W の定格電力を備え、80PLUS プラチナ レベルの認証を取得した、新しい MX シリーズ電源を発売しました。以下にこの電源の評価を示します。 Huntkey MX750P フルモジュール電源は、シンプルでファッショナブルなデザインコンセプトを採用しており、プレイヤーに合わせて選択できるブラックとホワイトの 2 つのモデルがあり、どちらもマットな表面処理が施されており、シルバーグレーとレッドのフォントで質感が優れています。
