<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换之自动切换</title> <style type="text/css"> * {padding: 0;margin: 0;} li {list-style: none;} .wrapper { margin: 0 auto; width: 100%; max-width: 1140px; } .tabbox { margin: 40px auto; width: 400px; height: 200px; border: 1px solid #f70; overflow: hidden; } .tabbox .tab-tit{ position: relative; height: 40px; } ul { position: absolute; left: -1px; width: 401px; height: 40px; line-height: 40px; background-color: #eaeaea; } ul li { float: left; border-left: 1px solid #f70; border-bottom: 1px solid #f70; text-align: center; width: 99px; height: 40px; overflow: hidden; } .clear {clear: both;} .select { padding-right: 1px; border-bottom: none; background-color: #fff; } a:link, a:visited { font-size: 16px; font-weight: bold; color: #888; text-decoration: none; } .select a { color: #333; } a:hover, a:active { color: #f20; font-weight: bold; } .tab-txt { width: 400px; padding: 40px; overflow: hidden; } .demo {display: none;} .tab-txt p { line-height: 40px; } </style> </head> <body> <div> <div> <div> <ul> <li><a href="javascript:;">女枪</a></li> <li><a href="javascript:;">提莫</a></li> <li><a href="javascript:;">盖伦</a></li> <li><a href="javascript:;">剑圣</a></li> </ul> </div> <!-- <div></div> --> <div> <div> <p>我有两把枪，一把叫射，另一把叫，啊~</p> <p>你有一双迷人的眼睛，我非常喜欢！</p> </div> <div> <p>我去前面探探路</p> <p>提莫队长正在待命！</p> </div> <div> <p>放马过来吧，你会死的很光荣的！</p> <p>快点儿结束吧，我头有点儿转晕了……</p> </div> <div> <p>我的剑就是你的剑。</p> <p>眼睛多，看东西才会更加清楚</p> </div> </div> </div> </div> <script type="text/javascript"> function $(id) { return typeof id === "string" ? document.getElementById(id) : id; } window.onload = function() { var index = 0; var timer = null; var tits = $("tabTit").getElementsByTagName("li"); var txts = $("tabTxt").getElementsByClassName("demo"); if(tits.length != txts.length) {return;} for(var i=0,l=tits.length; i<l; i++) { tits[i].id = i; tits[i].onmouseover = function() { clearInterval(timer); styleFun(this.id); } tits[i].onmouseout = function() { timer = setInterval(autoPlay, 2000); } } //在开启定时器的同时清楚定时器并置空 if(timer) { clearInterval(timer); timer = null; } timer = setInterval(autoPlay, 2000); function autoPlay() { index++; if(index >= tits.length) { index = 0; } styleFun(index); } function styleFun(ele) { for(var j=0,m=tits.length; j<m; j++) { tits[j].className = ""; txts[j].style.display = "none"; } tits[ele].className = "select"; txts[ele].style.display = "block"; //将鼠标移入移出时的index传给autoPlay; index = ele; } } </script> </body> </html>
4. 广告栏切换实例
<!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: 20px auto; overflow: hidden; position: relative; margin: 100px auto; } .wrap ul { position: absolute; } .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'), piclist = pic.getElementsByTagName('li'), list = document.getElementById('list').getElementsByTagName('li'), picheight = 170, index = 0, timer = null; if(piclist.length != list.length) { return; } // 定义并调用自动播放函数 if(timer) { clearInterval(timer); timer = null; } timer = setInterval(picFunc, 2000); function picFunc() { index++; if(index >= piclist.length) { index = 0; } changePic(index); } // 定义图片切换函数 function changePic(ele) { for(var j = 0, m = piclist.length; j < m; j++) { list[j].className = ""; } pic.style.top = -ele * picheight + "px"; list[ele].className = "on"; index = ele; } // 鼠标划过整个容器时停止自动播放 wrap.onmouseover = function() { clearInterval(timer); } // 鼠标离开整个容器时继续播放至下一张 wrap.onmouseout = function() { timer = setInterval(picFunc, 2000); } // 遍历所有数字导航实现划过切换至对应的图片 for(var i = 0, l = list.length; i < l; i++) { list[i].id = i; list[i].onmouseover = function() { changePic(this.id); } } } </script> </head> <body> <div> <ul> <li><img src="https://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li> <li><img src="https://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li> <li><img src="https://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li> <li><img src="https://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li> <li><img src="https://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>