Record the Native JS write tab tab
Mouse slide to toggle picture
Automatically switch after leaving
<! DOCTYPE html>. 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:l Eft line-height:20px; Text-align:center; Cursor:pointer; }
. Wrap ol. On {background: #E97305; color: #fff;} </style><body> <div class= "wrap" id= ' wrap ' > <ul id= "pic" > <li style= "display:block" ></li> <li></li> <li></li> <li></li> <li></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";p Ic.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 () {Clearint Erval (timer); Changeoption (this.id); } list[i].onmouseout = function () {clearinterval (timer); timer = SetInterval (autoplay, +)}} clearinterval (timer); Timer = setinterval (autoplay, +)} tab (); }</script></body>
The Tab tab of the native JS drawing
