課程
/前端開發
/JavaScript
/Tab選項卡切換效果
我有的地方敲錯了，得重新回看視頻慢慢找，有的時候找不到很是心累，希望有個大佬能夠發個源碼，我好對照查找一下?
2019-10-20
源自：Tab選項卡切換效果 1-3
正在回答
<!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;
??????//?定義并調用自動播放函數
??????function?autoplay(){
????????index++;
??????????if(index?==?list.length){
????????????index?=?0;
??????????}
??????????autoImg()
??????}
??????timer?=?setInterval(function(){??autoplay()?},3000)
??????//?定義圖片切換函數
?????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);
????};
?????//?鼠標離開整個容器時繼續播放至下一張
?????wrap.onmouseout?=?function(){/*鼠標移出，重新調用定時器，輪播圖開始*/
?????//?遍歷所有數字導航實現劃過切換至對應的圖片
?????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>
舉報
本課程詳細介紹網頁頁面中最流行常用的tab切換效果
1 回答代碼運行不出來，沒有效果，求大神幫助
1 回答運行沒有報錯，但是沒有切換效果,大神幫幫忙
2 回答大家看看哪里有問題？
1 回答為什么資料沒有源碼啊啊 啊怎么是伸縮性菜單
5 回答為什么用老師的方法沒有效果
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
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;
??????//?定義并調用自動播放函數
??????function?autoplay(){
????????index++;
??????????if(index?==?list.length){
????????????index?=?0;
??????????}
??????????autoImg()
??????}
??????timer?=?setInterval(function(){??autoplay()?},3000)
??????//?定義圖片切換函數
?????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);
????};
?????//?鼠標離開整個容器時繼續播放至下一張
?????wrap.onmouseout?=?function(){/*鼠標移出，重新調用定時器，輪播圖開始*/
??????timer?=?setInterval(function(){??autoplay()?},3000)
????};
?????//?遍歷所有數字導航實現劃過切換至對應的圖片
?????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>