請(qǐng)問大佬有沒有老師的所有源碼文件
我有的地方敲錯(cuò)了，得重新回看視頻慢慢找，有的時(shí)候找不到很是心累，希望有個(gè)大佬能夠發(fā)個(gè)源碼，我好對(duì)照查找一下?
joy灬
2019-10-20
1 回答
舉報(bào)
0/150
提交
取消
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;
??????//?定義并調(diào)用自動(dòng)播放函數(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";
?????}
?????//?鼠標(biāo)劃過整個(gè)容器時(shí)停止自動(dòng)播放
?????wrap.onmouseover?=?function(){/*鼠標(biāo)引入，清除定時(shí)器，輪播圖停止*/
????????clearInterval(timer);
????};
?????//?鼠標(biāo)離開整個(gè)容器時(shí)繼續(xù)播放至下一張
?????wrap.onmouseout?=?function(){/*鼠標(biāo)移出，重新調(diào)用定時(shí)器，輪播圖開始*/
??????timer?=?setInterval(function(){??autoplay()?},3000)
????};
?????//?遍歷所有數(shù)字導(dǎo)航實(shí)現(xiàn)劃過切換至對(duì)應(yīng)的圖片
?????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>