原生JS畫的tab選項卡
阿新 • • 發佈：2017-08-16
記錄 bsp back height 原生js .class lis get function
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圖片切換</title> <style> * { margin: 0; padding: 0; list-style: none; }
.wrap { height: 170px; width: 490px; overflow: hidden; position: relative; margin: 100px auto; }
.wrap ul { position: absolute; /* overflow: hidden; */ }
.wrap ul li { height: 170px; display:none; }
.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: 20px; text-align: center; cursor: pointer; }
.wrap ol .on { background: #E97305; color: #fff; } </style> </head>
<body> <div class="wrap" id=‘wrap‘> <ul id="pic"> <li style="display:block"><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" ></li> <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" ></li> <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" ></li> <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" ></li> <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" ></li> </ul> <ol id="list"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <script> window.onload = function () { var warp = document.getElementById("wrap"), pic = document.getElementById("pic") list = document.getElementById("list").getElementsByTagName("li"), timer = null, index = 0; function autoplay() { index++; if (index >= list.length) { index = 0; } changeoption(index); } function changeoption( curIndex){ for (var j = 0; j < list.length; j++) { list[j].className = "" } list[curIndex].className = "on"; pic.style.marginTop = -170 * (curIndex) + "px"; index = curIndex;
} function tab() { for (var i = 0; i < list.length; i++) { list[i].id = i; list[i].onmouseover = function () { clearInterval(timer); changeoption(this.id); } list[i].onmouseout = function () { clearInterval(timer); timer = setInterval(autoplay, 2000) } } clearInterval(timer); timer = setInterval(autoplay, 2000) } tab(); } </script> </body>
</html>
記錄一下原生js寫的tab選項卡
鼠標滑入可以切換圖片
離開之後自動切換
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圖片切換</title> <style> * { margin: 0; padding: 0; list-style: none; }
.wrap { height: 170px; width: 490px; overflow: hidden; position: relative; margin: 100px auto; }
.wrap ul { position: absolute; /* overflow: hidden; */ }
.wrap ul li { height: 170px; display:none; }
.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: 20px; text-align: center; cursor: pointer; }
.wrap ol .on { background: #E97305; color: #fff; } </style> </head>
<body> <div class="wrap" id=‘wrap‘> <ul id="pic"> <li style="display:block"><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" ></li> <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" ></li> <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" ></li> <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" ></li> <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" ></li> </ul> <ol id="list"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <script> window.onload = function () { var warp = document.getElementById("wrap"), pic = document.getElementById("pic") list = document.getElementById("list").getElementsByTagName("li"), timer = null, index = 0; function autoplay() { index++; if (index >= list.length) { index = 0; } changeoption(index); } function changeoption( curIndex){ for (var j = 0; j < list.length; j++) { list[j].className = "" } list[curIndex].className = "on"; pic.style.marginTop = -170 * (curIndex) + "px"; index = curIndex;
} function tab() { for (var i = 0; i < list.length; i++) { list[i].id = i; list[i].onmouseover = function () { clearInterval(timer); changeoption(this.id); } list[i].onmouseout = function () { clearInterval(timer); timer = setInterval(autoplay, 2000) } } clearInterval(timer); timer = setInterval(autoplay, 2000) } tab(); } </script> </body>
</html>
原生JS畫的tab選項卡