途牛banner自動輪播

時間 2019-11-24

標籤 banner 動輪简体版

原文原文鏈接

<!DOCTYPE html> css

<html lang="en"> html

<head>函數

<title>途牛banner自動輪播</title>htm

對象

<style>

*｛/*通配符*/

margin:0px;/*外邊距*/

padding:0px;/*內邊距*/

｝

body{backround:url('imges/bg.jpg'); /*背景*/}

#box{

padding:10px;/*內邊距*/

width:100px;/**寬：100像素/

height:100px;/*高*/

border:1px solid red;/*邊框：邊框大小實線顏色*/}

margin:100px auto; /*外邊距：頂部距離自動水平居中*/

position:relative;/*定位：相對定位參照物*/

cursor:pointer;

｝

#box img{

position:absolute;

top:0px;

left:0px;

opacity:0; /*透明度*/

}

#box img.firstImg{

opacity:1;

}

#box ul{

position:abolute;

list-style:none; /*列表風格：無*/

border:1px solid red;

left:4px;

bottom:15px; /**/

}

#box ui li{

background:rgb(255,255,255);

width:119px;

height:30px;

margin:1px;

text-align:center; /*文字對齊方式：水平居中*/

line-height:30px; /*行高*/

float:left; /*左浮動向下排列變成向右排列*/

/*rgba(0-255,0-255,0-255,0-1)*/

a-alpha 透明度

a:0徹底透明

1徹底不透明

}

#box ul li.firstBtn{

background:rgba(0,0,0,0.7);

color:#fff;

}

#box p{

height:100px;

width:65px;

background:rgba(0,0,0,0.5);

position:absolute;

color:white;

font-size:70px;/*字體大小*/

text-align:center;

line-height:100px;

top:125; /*參考對象的一半*/

}

#box .btnLeft{

left:10px;

}

#box .btnRight{

right:10px;

}

</style>

<ul>

<li class=firstBtn>端午節快樂</li>

</ul>

&lt

</p>

&gt

</p>

</div>

</body>

//在文檔去獲取多個元素—經過標籤名（」標籤名」）

var aBtn=document.getElementsByTagName("li");

var aImg=document.getElementByTagName("img");

var num=0;

var oldBtn=aBtn[0];

oldBtn.className='firstBtn';

var oldImg=aImg[0];

oldImg.className='firstIng';

for(i=0;i<6;i++){

aBtn[i].index=i;自動屬性（值）

aBtn[i].onclick=function(){

//this指的是誰觸發了次函數，this就指向誰

num=this.index;

oldBtn.className='';

oldBtn=aBtn[num];//更新oldBtn

aBtn[num].className='firstBtn';//添加class類名

oldImg.className='';

oldImg=aImg[this.index];

aImg[num].className='firstImg';/點擊哪一個圖表，顯示哪一個圖片/

}

var timer

for(i=0;i<6;i++){

aBtn[i].index;

aBtn[i].onclick=function()｛

clearInterval(timer)//清除計時器

num=this.index;

run();

}

//核心

function run(){

oldBtn.className='';

oldBtn=aBtn[num];//更新oldBtn

aBtn[num].className='firstBtn';//添加class類名

oldImg.className='';

oldImg=aImg[num];

aImg[num].className='firstImg';/點擊哪一個圖表，顯示哪一個圖片/

}

timer=setInterval(function

{num++;

if(num==6{num=0;} //==判斷，=賦值

run();

},1000)//每隔1秒執行一次function(){}

</script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。