ホームページ > 記事 > ウェブフロントエンド > タオバオスライドショーのJS実装方法effect_javascriptスキル
タオバオスライドショーのJS実装方法effect_javascriptスキル
- WBOYオリジナル
- 2016-05-16 17:39:331636ブラウズ
実装のアイデア:
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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。