Day18 使用多個img標籤做輪播效果

使img標籤不斷顯示和隱藏來實現輪播圖效果。

首先先建立好乙個div存放。其次放5張進去。除第一張之外，都設display:none樣式隱藏起來

先建立乙個run()函式，用去定時器執行部分。

var count =1;

function
run(
) img[count]
.style.display =
"block"
; count++;if
(count >4)
}

run()函式講解：

1.首先先獲取存放的div，即var divimg = document.getelementbyid("divimg");

2.其次再獲取div中的每乙個img標籤。即var img = divimg.getelementsbytagname("img");

3.for迴圈的作用:為了讓所有都隱藏。for迴圈執行5次，即全部隱藏。

4.img[count].style.display = "block";函式外宣告了count=1，故執行完上面一句，下標為0的img會隱藏，所有此時下標為1的div要顯示。

5.count++，每執行一次定時器要顯示下一張，故count++；

6.if()判斷,當執行完第五張[下標為4]，重置count=0;

然後用定時器來執行run()函式。

//首先先要宣告乙個定時器time;

var time;
//每隔1s執行一次
time =
setinterval
("run()"
,1000
);

簡單的輪播效果就完成了，當然之後要對其進行公升級強化。

再在存放的的div上新增onmouseover和onmouseout事件，讓滑鼠移入停止輪播，滑鼠移出繼續輪播.

"divimg"

onmouseover
="st()"
onmouseout
="start()"
>

functionst(

)function
start()

當移入時，清除定時器，移出時，再次啟動定時器。

注：移入事件不要用stop()來命名。因為stop()是內建方法。

然後一般的輪播都會有按鈕，當滑鼠移入相應按鈕，則切換相應。

首先先布個局，使用來做

html**

"ul"

>
class
="color"
>
1li>
>
2li>
>
3li>
>
4li>
>
5li>
ul>

css樣式

#ul li

.color

效果圖：

記得把第乙個設為黑底白字。

然後考慮實現效果。繼續寫在run()方法中。

var count =1;

function
run(
) img[count]
.style.display =
"block"
;//按鈕改變樣式，思路和上面的for迴圈相同。
for(
var i=
0;i) allli[count]
.style.background =
"#000"
; allli[count]
.style.color =
"#fff"
; count++;if
(count >4)
}

讓按鈕跟隨一起，切換，相應的按鈕改變顏色。

為了讓滑鼠移入有效果，則需要新增onmouseover事件。

像下面這樣：

onmouseover

="show(this)"
>
li>

然後寫show(num)方法。

function

show
(num)

show(num)方法詳解：

第一：執行了st()函式，即清除定時器。

第二：獲取傳來的num。因為是有參方法，滑鼠移入li中，傳來了對應的li(即this)，再用innerhtml獲取其文字，減一即為對應的下標。

第三：再執行一次run()函式，將和按鈕切換。

第四：繼續執行定時器。

更完~~~

閉關日記 Day18

陰。好幾天沒更新日記了，說一下這幾天完成的事和正在做的事。專案f基本完結，專案b在除錯相容 360瀏覽器缺省會進入相容模式來渲染 練車 1號考科三 翻譯 uwp設計指南 當前進度1 時間碎片管理的uwp著手開發 專案t 另外，乙個學長想讓我幫忙做乙個h5小遊戲，在溝通中。target 003 時長 ...

前端學習Day18

一 3d的旋轉 增加了rotatez 和 rotate3d x,y,z,度數 注 x y z 它們是乙個向量值，0是不旋轉，1是旋轉 eg rotate3d 1,1,0,45deg 等價於 rotatex 45deg rotatey 45deg 二 3d的縮放 增加了 scalez 和 scale3...

Day 18 解析資料

day 18 正規表示式解析資料用正規表示式的方式來提取資料，在此不在贅述 補充一些正規表示式常用的符號 beautifulsoup解析資料 from bs4 import beautifulsoup 匯入第三方庫，注意大小寫 根據網頁內容建立解析器物件 格式為 beautifulsoup 網頁資料...