網(wǎng)頁設計與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例24輪播圖

教案24案例24輪播圖計劃學時2學時知識目標掌握設置元素樣式的語法格式掌握獲取元素的尺寸和位置的語法格式掌握輪播圖的實現(xiàn)方法能力目標能編寫JavaScript代碼實現(xiàn)輪播圖效果會使用開發(fā)者工具調試JavaScript的程序素質目標在編寫代碼中遵循正確的編寫代碼規(guī)范在編寫代碼中培養(yǎng)認真細致、精益求精的工匠精神教學重點設置元素樣式獲取或改變元素的尺寸和位置教學難點獲取或改變元素的尺寸和位置教學模式教學做一體化線上+線下混合式教學教學活動及主要環(huán)節(jié)素質培養(yǎng)第1學時（案例分析實現(xiàn)）=1\*ROMANI.問題討論：（5分鐘）對同學們課前觀看微課過程中的疑難問題展開討論。=2\*ROMANII.案例分析與實現(xiàn)：（40分鐘）一、案例描述創(chuàng)建小米產品廣告展示輪播圖，頁面瀏覽效果如圖24-1所示。具體要求如下。（1）輪流展示5張圖片，每隔2s切換一次。（2）切換圖片時有過渡效果。圖24-1輪播圖案例分析在頁面上添加盒子，在盒子中添加無序列表標記<ul>，在<ul>標記中添加6對<li>標記，在每個<li>標記中放入一張圖片，在最后的<li>標記中再次放入第一張圖片，使圖片切換時實現(xiàn)無縫銜接。定義盒子、<ul>標記、<li>標記和<img>標記的樣式。創(chuàng)建腳本文件，編寫JavaScript代碼，定義切換圖片的函數(shù)，使用window對象的setInterval()方法使函數(shù)每隔2s執(zhí)行一次。案例實現(xiàn)學生同步操作，做學教一體1．搭建輪播圖結構：<div

id="silder">

<ul

id="list">

<li><img

src="images/banner1.jpg"></li>

<li><img

src="images/banner2.jpg"></li>

<li><img

src="images/banner3.jpg"></li>

<li><img

src="images/banner4.jpg"></li>

<li><img

src="images/banner5.jpg"></li>

<

</ul></div>2．定義CSS樣式3．創(chuàng)建JavaScript腳本文件<script>

//第一輪結束，切換圖片時有從頭開始的效果

var

slider

=

document.querySelector("#slider"); //獲取盒子元素

var

list

=

document.querySelector("#list");

//獲取ul元素

var

img

=

document.querySelector("img");

//獲取圖像集合

var

uli

=

list.children;

//獲取圖片列表

var

index

=

0;

//圖片序號

setInterval(move,

2000);

//每隔2s執(zhí)行一次move()函數(shù)

function

move()

{

if

(index

<

uli.length

-

1)

{

//如果不是最后一張圖片

index++;//圖片序號加1

list.style.left

=

-index

*

img.offsetWidth

+

"px";

//

圖片向左移出，offsetWidth是圖像的布局寬度

list.style.transition

=

'left

1s';

//移出圖片時有過渡效果,用時1s

if

(index

==

uli.length

-

1)

{

//如果是最后一張圖片，則切換到第一張圖片

setTimeout(function()

{

index

=

0;

//圖片變?yōu)榈谝粡?/p>

list.style.left

=

-index

*

img.offsetWidth

+

"px";

list.style.transition

=

'left

0s';

},

1000);

}

}

}</script>

第2學時（相關知識點）設置元素樣式對象.style.屬性="屬性值";例24-1通過腳本代碼設置盒子的樣式。圖24-3設置元素樣式<div

id="box1">學而時習之</div>

<script

type="text/javascript">

var

box

=

document.querySelector("#box1"); //獲取元素

box.style.width="200px";

//設置寬度

box.style.height="200px";

//設置高度

box.style.backgroundColor="#1D94FC";

//設置背景顏色

box.style.color

=

"#fff";

//設置文字的顏色

box.style.fontSize

=

"24px"

//設置文字大小</script>

獲取元素尺寸和位置屬性說明offsetLeft獲取元素相對父元素左邊框的偏移量offsetTop獲取元素相對父元素上邊框的偏移量offsetWidth獲取元素自身的寬度，包括邊框和內邊距offsetHeight獲取元素自身的高度，包括邊框和內邊距例24-2實現(xiàn)滾動文字效果。圖24-4滾動文字效果搭建結構：<div

class="box">

<ul>

<li>教育部、中央軍委政治工作部、軍委國防動員部定向培養(yǎng)士官試點院校</li>

<li>電子信息產業(yè)國家高技能人才培訓基地</li>

<li>國家示范性高職單獨招生試點院校</li>

<li>“3+2”對口貫通分段培養(yǎng)本科院校</li>

<li>國家級示范性軟件職業(yè)技術學院</li>

<li>全國信息產業(yè)系統(tǒng)先進集體</li>

</ul>

</div>2．編寫腳本代碼：<script>

//實現(xiàn)滾動文字效果

var

speed

=

-1;

var

list

=

document.getElementsByTagName('ul')[0];

//獲取ul元素

var

item

=

document.getElementsByTagName('li');

//獲取li元素集合

list.innerHTML

=

list.innerHTML

+

list.innerHTML;

list.style.width

=

item[0].offsetWidth

*

item.length

+

'px';

//offsetWidth為元素的寬度（包括元素寬度、內邊距和邊框，不包括外邊距）

function

move()

{

if

(list.offsetLeft

<

-list.offsetWidth

/

2)

{

//offsetLeft元素與父元素左邊的距離

list.style.left

=

0

+

"px";

}

list.style.left

=

list.offsetLeft

+

speed

+

'px';

}

setIn