Tip: You can modify some of the code before running
<! DOCTYPE html> <ptml lang= "en" > <pead> <meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title> picture scrolling </title> <style>* {margin:0;padding:0}</style> <!--jque Ry Library--> <script type= "Text/javascript" > Window.onload=function () {var otab=document.getelementby Id ("Tab-wrap"); var olist=otab.getelementsbytagname ("ul") [0]; var ali=otab.getelementsbytagname ("Li"); var aimg=otab.getelementsbytagname ("img"); var adiv=otab.getelementsbytagname ("div"); var swidth=aimg[0].offsetheight; var index=i=0; var timer=playtimer=null; var border=true; var atmp=[]; var alib=[0]; var aclor=[["#DF2526", "#00B5E4"],["#AAC901", "#DF2018"],["#07FFF1", "#FF650F"],["#9670C3", "#49BCFD"]]; for (i=0;i<ali.length;i++) {Atmp.push ("<li></li>")} var ocount=document.createelement ("ul") ; Ocount.classname= "Count"; Ocount.innerhtml=atmp.join (""); Otab.AppendChild (Ocount); var abtn=otab.getelementsbytagname ("ul") [1].getelementsbytagname ("Li"); for (i=0;i<abtn.length;i++) {abtn[i].index=i; Abtn[i].onclick=function () {index=this.index; Alib.push (index); if (alib.length>2) {alib.shift ()}; for (i=0;i<abtn.length;i++) {abtn[i].classname= ""; ali[i].style.zindex=100; Ali[i].style.display= "None"; } abtn[index].classname= "Current"; ali[index].style.zindex=200; ali[index].style.top=swidth+ "px"; ali[index].style.display= "Block"; ali[alib[0]].style.display= "Block"; ALI[INDEX].STYLE.BACKGROUND=ACLOR[INDEX][0]; ADIV[INDEX].STYLE.BACKGROUND=ACLOR[INDEX][1]; if (Alib[0]!=alib[1]) {showmove (Ali[index])}else {ali[index].style.top=0; }}//Abtn[index].classname= "current"; ali[index].style.zindex=200; ALI[INDEX].STYLE.BACKGROUND=ACLOR[INDEX][0]; ADIV[INDEX].STYLE.BACKGROUND=ACLOR[INDEX][1];AutoPlay (); Otab.onmouseover=function () {clearinterval (Playtimer); } olist.onmouseout=function () {autoplay (); }//function AutoPlay () {Playtimer=setinterval (function () {index==abtn.length-1 && (border=false); Index==0 && (border=true); BOrder? index++: index--; Console.log (index); Abtn[index].onclick (); },5000)}//function Showmove (obj) {clearinterval (timer); Timer=setinterval (function () {domove (obj)},30)}//function Domove (obj) {var ispeed=obj.offsettop/ 10; Ispeed=ispeed>0? Math.ceil (ispeed): Math.floor (Ispeed); Obj.offsettop<=0? Clearinterval (timer): obj.style.top=obj.offsettop-ispeed+ "px"; } </script> <!--Site styles--> <link rel= stylesheet "type=" Text/css "href=" lib/css/reset.c ss "/> <style> body{background: #000; text-align:center;font:12px/20px Arial; #tab-wrap {width:100%;p osition:rElative;overflow:hidden;} #tab-wrap. List {position:relative;height:252px} #tab-wrap. list li {position:absolute;top:0;left:0;width:100%;height:252px;} #tab-wrap. List li img {margin:0 auto;width:990px} #tab-wrap list li bg-right {position:absolute;top:0;right:0;width:50%;height:252px;z-index:-1} #tab-wrap. Count {position:absolute;left:50%;width:10px;height:100px;top:100px;margin-left:470px;z-index:300;} #tab-wrap. Count li {float:left;width:10px;height:10px;background: #ccc; margin-bottom:10px;} #tab-wrap. Count Li:hover{cursor:pointer;} #tab-wrap. Count li.current {background: #85BE2E;} </style> </pead> <body> <div id= "Tab-wrap" > <ul class= "List" > <li> <div class= "Bg-right" ></div> </li> <li> <div class= "Bg-right" ></div > </li> <li> <div class= "bg-right" ></div> </li> <li> <div Class= "Bg-right" ></div> </li> </ul> </div> </body> </ptml></td> & Lt;/tr> </table>
Tip: You can modify some of the code before running
