交作業(yè)，不足之處，請大佬們指出。
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>輪播圖切換</title>
<style>
? *{
margin:0;
? ? padding:0;
? ? list-style:none;
}
? .tit{
height:170px;
? ? ? ? width:490px;
/* border: 1px saddlebrown solid; */
? ? ? ? overflow: hidden;
? ? ? ? position: relative;
? ? ? ? margin:200px auto;
}
? .tit ul{
position:absolute;
top: 0;
left: 0;
}?
? .tit ul li{
/* height:170px; */
/* width: 490px; */
visibility: inherit;
}
? .tit ol{
? ?position:absolute;
? ? ? ? ? ?right:5px;
? ? ? ? ? ?bottom:10px;
? ?}
? ?
? .tit 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;}
??
? .tit ol .on{background:#E97305;
? ? ? ? ? ? ? ?color:#fff;}
? </style>
? <script type="text/javascript">
? //封裝ID函數(shù)
? function getId(id){
? return typeof? id==="string"?document.getElementById(id):id;
? }
?
??
? window.onload=function(){
? ? var wrap=getId("tit");
? ? var image_list=getId("pic").getElementsByTagName("li");
? ? var tag_list=getId("list").getElementsByTagName('li');
? ? var index=0;
? ? var timer=null;
if(image_list.length!=tag_list.length){
return;
}
for(var i=0;i<tag_list.length;i++){
tag_list[i].id=i;
// tag_list[i].onclick=a_onclick;//點擊
// tag_list[i].onmouseover=a_onclick;//鼠標經過
tag_list[i].onmouseover=function(){
if(timer){
clearInterval(timer);
timer=null;
}
for(var t=0;t<tag_list.length;t++){
tag_list[t].className="";
image_list[t].style.display="none";
}
this.className="on";
image_list[this.id].style.display="block";
index=this.id;//替換鼠標移動后index的值
}
tag_list[i].onmouseout=function(){
// start_time();
timer=setInterval(function(){
index++;
if(index>=tag_list.length){
index=0;
}
for(var k=0;k<tag_list.length;k++){
tag_list[k].className="";
image_list[k].style.display="none";
}
tag_list[index].className="on";
image_list[index].style.display="block";
},2000);
}
}
//封裝點擊切換函數(shù)
function a_onclick(){
var that=this;
// lay_time();
// reset();
function reset(){
for(var j=0;j<tag_list.length;j++){
tag_list[j].className="";
image_list[j].style.display="none";
}
this.className="on";
image_list[this.id].style.display="block";
}
function lay_time(){//封裝延時切換函數(shù)
if(timer){//清除定時器
clearTimeout(timer);
timer=null;
}
timer=setTimeout(function(){//延時切換
for(var j=0;j<tag_list.length;j++){
tag_list[j].className="";
image_list[j].style.display="none";
}
that.className="on";
image_list[that.id].style.display="block";
},1000);
}
}
function start_time(){//封裝自動切換函數(shù)
timer=setInterval(function(){
index++;
if(index>=tag_list.length){
index=0;
}
for(var k=0;k<tag_list.length;k++){
tag_list[k].className="";
image_list[k].style.display="none";
}
tag_list[index].className="on";
image_list[index].style.display="block";
},2000);
}
start_time();
? ?}
? </script>
</head>
<body>
? <div class="tit" id="titid">
? <div class="image-box">
<ul id="pic">
? <li><img src="../img/image01.jpg" style="display: block" alt=""></li>
? <li><img src="../img/image02.jpg" alt=""></li>
? <li><img src="../img/image03.jpg" alt=""></li>
? <li><img src="../img/image04.jpg" alt=""></li>
? <li><img src="../img/image05.jpg" alt=""></li>? ??
</ul>
? </div>
? <div class="tag-box">
<ol id="list">
? <li class="on">1</li>
? <li>2</li>
? <li>3</li>
? <li>4</li>
? <li>5</li>
</ol>
? </div>
? </div>
</body>
</html>
2019-10-20
<!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;??transition:?all?1s;
????-webkit-transition:?all?1s;?/*?Safari?*/?}?
??.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;
??????//?定義并調用自動播放函數(shù)
??????function?autoplay(){
????????index++;
??????????if(index?==?list.length){
????????????index?=?0;
??????????}
??????????autoImg()
??????}
??????timer?=?setInterval(function(){??autoplay()?},3000)
??????//?定義圖片切換函數(shù)
?????function?autoImg(){
????????for(?var?i=0;?i<list.length;i++){
??????????????list[i].className?=?"";
??????????}
??????????list[index].className?=?"on";
??????????pic.style.marginTop?=?index*-170+"px";
?????}
?????//?鼠標劃過整個容器時停止自動播放
?????wrap.onmouseover?=?function(){/*鼠標引入，清除定時器，輪播圖停止*/
????????clearInterval(timer);
????};
?????//?鼠標離開整個容器時繼續(xù)播放至下一張
?????wrap.onmouseout?=?function(){/*鼠標移出，重新調用定時器，輪播圖開始*/
??????timer?=?setInterval(function(){??autoplay()?},3000)
????};
?????//?遍歷所有數(shù)字導航實現(xiàn)劃過切換至對應的圖片
?????for(?var?i?=?0;?i<list.length;i++){
??????list[i].index?=?i;
??????list[i].onmousemove?=?function(){
????????index?=?this.index?;//?重置索引值
????????//?alert(this.index)
????????autoImg()
??????}
?????}
???}
??</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>