ホームページ >ウェブフロントエンド >jsチュートリアル >js の完璧な画像ニュース回転効果、Tencent Dayue.com_javascript スキルのホームページの画像回転から修正
js の完璧な画像ニュース回転効果、Tencent Dayue.com_javascript スキルのホームページの画像回転から修正
- WBOYオリジナル
- 2016-05-16 17:59:111442ブラウズ
背景
私が望む完璧な画像ニュース回転効果:
1. ニュース画像、ニュースタイトル、回転インデックスがあります
2. マウスがインデックスに移動しないと、画像が自動的に切り替わります
3 .マウスをインデックス上に移動すると、既存の画像が表示され、ポーリングが停止します
4. マウスをインデックスから遠ざけると、ポーリングが続行されます
5. シンプル、明確、軽量 (サードパーティのファイル、できればネイティブ js に依存しません)
プロセス
多くの画像ポーリング効果を見つけましたが、それらは常に私の要件とは多少異なり、完璧であることはできません。機能的ではないか、派手すぎるかのどちらかです。自分でも開発したかったのですが、些細な事が遅れて着手できずにいます。
Tencent Dayue.com の写真ニュースを時々見ることがありますが、これは私が望んでいる効果のように感じます。しかし、注意深くテストした結果、要件 3 を満たしていないことが判明しました。つまり、ポーリング停止メカニズムはありません。考えてみれば、自分で修正したほうが良いかもしれません。それは私の要件にほぼ一致するでしょう。
アイデア: ページがロードされ、写真のポーリングが開始されます。マウスをインデックスに移動すると、関連する画像が表示され、投票がクリアされます。マウスをインデックスから遠ざけると、ポーリングが再開されます。
現在アクティブ化されているイメージ インデックス ID を記録するグローバル変数 ID を定義します。回転するたびに、この ID が更新されます。マウスがインデックスから離れたら、この ID を使用してポーリングを開始します。
焦点图文字背景href="/a/20111119/000002.htm">
广州花都拆违遭遇碎瓶煤气罐
- 1
- 2
- 3
- 4
<script><br>//マウスを移動するアクション。現在の画像を表示し、ポーリングをクリアします。 <br>function adchangea(adid) { <br>dochange(adid); <br>clearTimeout(adisround); <br>} <br>//自動ポーリング<br>function adchangea2(adid) { <br>dochange ( adid); <br>var adbigimg = document.getElementById("adpica").getElementsByTagName("div"); <br>if ((adnext = adid 1) > adbigimg.length) <br> adisround = setTimeout('adchangea2(' adnext ')', 3000); <br>} <br>//現在の画像を表示します <br>function dochange(adid) { <br>id = adid>var adbigimg = document.getElementById("adpica").getElementsByTagName("div"); <br>var adsmallimg = document.getElementById("adtipa").getElementsByTagName("li"); ; adbigimg.length; adi ) { <br>adbigimg[adi].className = ""; <br>adbigimg[adid - 1].className = "表示"; <br>adsmallimg[adid - 1].className = "現在"; <br>} <br>var adisround = setTimeout("adchangea2(2)", <br>var id;/ /現在のアクティベーション ID <br>//マウスが ul ブロックから離れると、ポーリングが再開されます。 <br>function change() { <br>adchangea2(id) <br>} <br></script>