JS實作淘寶投影片效果的實作方法_javascript技巧
- WBOY原創
- 2016-05-16 17:39:331633瀏覽
實現思路：
1、for迴圈為數字按鈕加上點擊事件。
2.for循環先把按鈕的樣式清空，再把目前樣式設定樣式。
3、為每個按鈕新增自訂屬性index aBtn[i].index=i aBtn[2]=2 第二個按鈕和第二張圖片想對應，用運動框架把大圖的UL每次移動-150px，因為圖片高度是150px。如果移動到第n張圖片就是-150*n。
4、定義變數now，用來自動播放用的。把當前圖片賦值給now now=this.index。
5、定義自動播放函數。 now 下一張，if判斷，到最後一張圖片的時候就把now設為0，就是第一張。 if(now==aBtn.length)
6、定義定時器，每2秒就呼叫一次自動播放函數。
7、滑鼠指向圖片時就清除定時器。
8、滑鼠離開圖片時就開啟定時器。
複製程式碼 程式碼如下:
<script><p )<BR> {<BR> var oDiv=document.getElementById('play');<BR> var aBtn=oDiv.getElementsByTagName('ol')[0]. =oDiv.getElementsByTagName('ul')[0];<BR> var now=0;<BR><BR> for(var i=0;i<aBftn.length;i )<<mw> 但 [i].index=i;<br> aBtn[i].onmouseover=function()<br> tab();<BR> }<BR> };<BR><BR> function tab()<BR> ) <BR> {<BR> aBtn[i] .className=''; //清空所有按鈕的樣式<BR> };<br> aBtn[now].className='active'; 150*now}); //用運動框架把UL的TOP設定為目前個數*-150，第三張圖片就是2*-150<br> };<BR><BR> function next()<BR><BR> function next()<BR><BR> > {<BR> now ; //切換圖片<BR> if(now==aBtn. now=0; // 把圖片拉回第一張<br> }<br> tab(); //把圖片拉回第一個後繼續移動<BR> 秒自動切換圖片<BR><BR> oDiv.onmouseover=function()<BR> {<BR> oDiv.onmouseout=function() <BR> {<BR> timer=setInterval(next,2000); //開啟定時器<BR> <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 － 智慧教室<BR> <link href="css.css" rel=" stylesheet" type="text/css" /><BR> <script src="baseCommon.js"></script>
<script><BR> window.onload=function()<BR> {<BR> window.onload=function()<BR> {<BR> window.onload=function()<BR> {<br> var oDiv=document.getElementById('play');<br> var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li 'F);<Tagm. ')[0];<BR> var now=0;<BR><BR> for(var i=0;i<aBtn.length;i ) <BR> ;<BR> aBtn[i].onmouseover=function()<BR> {<BR> tab();<BR> }<br> }; <br><BR> function tab()<BR> { <BR> for(var i=0;i<aBtn. aBtn[i].className=''; / / 將所有按鈕的樣式清空<BR> };<BR> aBtn[now].className='active'; // /用運動框架把UL的TOP設定為目前個數*-150，張圖片是2*-150<BR> };<BR><BR> function next()<br><br> function next()<BR> 切換圖片<BR> if(now==aBtn.length) //如果到了最後一張圖片<BR> {< 🎜> }<BR> tab (); // 拉回第一張圖片後繼續移動<BR> };<BR><BR> var time=setInterval(next,2000); //2秒自動切換圖片<BR>< .onmouseover=function()<br> {<br> clearInterval(timer); //清除計時器<br> . {<br> timer= setInterval(next,2000); //開啟計時器<BR> };<BR> };<BR> </script>
>
a>
html >
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn