国性色aV一区二区三区,天天躁夜夜躁狠狠眼泪网,久久天天久久狠狠小说

第2章延遲切換效果
視頻：2-1 js實現延遲切換(18:34)

第4章編程挑戰
編程：4-1 焦點輪播圖效果

焦點輪播圖效果

小伙伴們，根據所學知識，使用JS實現下圖所示的焦點圖切換效果

圖片素材地址：

http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg

http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg

http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg

http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg

http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg

任務

一、頁面加載、獲取整個容器、所有放數字索引的li及放圖片列表的ul、定義放定時器的變量、存放當前索引的變量index
二、添加定時器，每隔2秒鐘index遞增一次、調用一次切換圖片函數

提示:
   1. index不能一直無限制的遞增下去，需做判斷
   2.調用切換圖片函數時需將遞增之后的index作為參數傳過去

三、定義圖片切換函數

提示:
  1.遍歷所有放數字索引的li，將每個li上的類去掉。
   2.根據傳遞過來的index值找到對應的li給它添加類設為當前高亮顯示。
   3. 根據傳遞過來的index值計算放圖片的ul的top值
   4. 改變index的值，讓其等于傳遞過來的參數值

注意：放圖片的ul的top值=-index*單張圖片的高度（所有圖片必須等高）
四、鼠標劃過整個容器時，圖片停止切換，離開繼續

提示:
1.  鼠標滑過整個容器時清除定時器
2.  鼠標離開時繼續執行定時器，切換至下一張圖片

五、遍歷所有放數字的li，且給他們添加索引、鼠標滑過時切換至對應的圖片

提示:
1.  鼠標滑過時調用圖片切換函數，將滑過的li的索引傳過去

?不會了怎么辦

index.html

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0; padding:0; list-style:none;} .wrap{height:170px; width:490px; margin:60px auto; overflow: hidden; position: relative; margin:100px auto;} .wrap ul{position:absolute;} .wrap ul li{height:170px;} .wrap ol{position:absolute; right:5px; bottom:10px;} .wrap ol li{height:20px; width: 20px; background:#ccc; border:solid 1px #666; margin-left:5px; color:#000; float:left; line-height:center; text-align:center; cursor:pointer;} .wrap ol .on{background:#E97305; color:#fff;} </style> <script type="text/javascript"> window.onload=function(){ var wrap=document.getElementById('wrap'), pic=document.getElementById('pic'), list=document.getElementById('list').getElementsByTagName('li'), index=0, timer=null; // 定義并調用自動播放函數 // 定義圖片切換函數 // 鼠標劃過整個容器時停止自動播放 // 鼠標離開整個容器時繼續播放至下一張 // 遍歷所有數字導航實現劃過切換至對應的圖片 } </script> </head> <body> <div class="wrap" id='wrap'> <ul id="pic"> <li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg" alt=""></li> </ul> <ol id="list"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

4-1 焦點輪播圖效果

焦點輪播圖效果

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

4-1 焦點輪播圖效果

熱搜

最近搜索清空

焦點輪播圖效果

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～