<!DOCTYPE html> <!--申明文档类型：html-->
<html lang="en"> <!--html 根标签 lang:language--en:english--'zh-CN'中文简体-->
<head>
<meta charset="UTF-8">
<meta name=“Generator“ content="Editplus"> <!--字符集：UTF-8BI编码-->
<meta name="Author" content="千寻"> <!--作者-->
<meta name="Keywords" content="途牛"> < --描述-->
<meta name="Desription" content="途牛......."> <--网页标题-->
<title>途牛banner自动轮播</title>
<!--css层叠样式 修饰，美化 网页-->
<style>
*｛/*通配符*/
margin:0px;/*外边距*/
padding:0px;/*内边距*/
｝
body{backround:url('imges/bg.jpg'); /*背景*/}
#box{
padding:10px;/*内边距*/
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);
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;
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>
<body> <!--网页主体：结构 可视化区域-->
<div id="box"> <!---id命名唯一性（身份证）->
<img class=firstImg src="images/1.jpg" />
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
<img src="images/4.jpg" />
<img src="images/5.jpg" />
<img src="images/6.jpg" />
<!--无需列表标签-->
<ul>
<li class=firstBtn>端午节快乐</li>
<li></li>
<li></li>
</ul>
<!--class类命名-->
<p class=btnLeft>
<
</p>
<p class=btnRight>
>
</p>
</div>
</body>
<!--写入js-->
<script>
//在文档去获取多个元素—通过标签名（”标签名”）
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>
