js Tab切换实例
js 实现 tab 切换
实现如下效果：
1、图片每1秒钟切换1次。
2、当鼠标停留在整个页面上时，图片不进行轮播。
3、当点击切换页的选项上时，出现该选项的对应图片，而且切换页选项的背景颜色发生相应的变化。
4、当图片发生轮播切换时，在不点击选项卡的前提下，相应的选项卡背景颜色也自动发生变化。
效果图如下：
index.html文件
<!DOCTYPE html> <html> <head> <title>js导航轮播</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="main" id="main"> <div class="nav"> <ul id="ul"> <li id="0">首页</li> <li id="1">点击看看</li> <li id="2">会自动的</li> <li id="3">我的网站</li> </ul> </div> <div class="banner" id="banner"> <a href=""><img src="img/1.jpg" class="banner-slide"/></a> <a href=""><img src="img/3.jpg" class="banner-slide"/></a> <a href=""><img src="img/4.jpg" class="banner-slide"/></a> <a href=""><img src="img/5.jpg" class="banner-slide"/></a> </div> </div> </body> </html>
style.css文件
*{margin: 0;padding: 0;} /*导航菜单*/ body{font-family: "Microsoft YaHei";} .main{width:602px;height:263px;margin: 20px auto;overflow: hidden;} .nav ul{width: 600px;overflow: hidden;border: 1px solid #f3f3f3;border-bottom: #fc0;} .nav ul li{float: left;list-style: none;width: 150px;text-align: center;background-color: #fff;padding: 5px 0;border-radius: 5px;cursor: pointer;} .nav ul .active{background-color: #fc0;font-weight: bold;cursor: pointer;} /*轮播图*/ .banner{width:602px;overflow: hidden;position: relative;} img{width: 100%;} img .banner-slide{vertical-align: bottom;position: absolute;display: none;}
script.js文件
//封装一个代替getElementById()的方法 function $(id){ return typeof(id) === "string"?document.getElementById(id):id; } window.onload=function(){ var index = 0, timer = null, titles = $("ul").getElementsByTagName("li"), pics = $("banner").getElementsByTagName("img"), len = pics.length; //初始状态设置 titles[0].className="active"; pics[0].style.display='block'; //封装一个切换的tab函数 function tab(){ //鼠标滑过是清除定时器 $("main").onmouseover=function(){ if(timer) {clearInterval(timer);} } //鼠标滑出时继续自动切换 $("main").onmouseout=function(){timer = setInterval(autoPlay,1000);} //遍历li，点击li时跳转到相应页面，并且li样式随之改变 for(var i=0;i<len;i++){ titles[i].id=i; titles[i].onclick=function(){ clearInterval(timer); changeOption(this.id); } $("main").onmouseout=function(){ timer = setInterval(autoPlay,1000); } } if(timer){ clearInterval(timer); timer=null; } //添加定时器，实现每隔一秒自动切换 timer = setInterval(autoPlay,1000); //封装autoPlay自动切换函数 function autoPlay(){ index++; if(index >= len){ index = 0; } changeOption(index); } //封装changeOption函数 function changeOption(curIndex){ for (var j=0;j<len;j++) { titles[j].className=''; pics[j].style.display='none'; } titles[curIndex].className="active"; pics[curIndex].style.display='block'; index=curIndex; } } tab(); }
