<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><Htmlxmlns= "http://www.w3.org/1999/xhtml" ><Head><Metahttp-equiv= "Content-type"Content= "text/html; Charset=utf-8 "/><title> Adaptive Focus Graph Carousel </Title><Metahttp-equiv= "X-ua-compatible"content= "Ie=8"/><Metahttp-equiv= "X-ua-compatible"Content= "Ie=9" ><MetaName= "Viewport"Content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no"/><!----------------------------------* Description: jquery Adaptive Focus Graph Carousel material (optimized based on other people's footage)* Fang Lin* Version: v1.0.0 (2014.10.27)* Note: All pictures must be kept in a uniform size---------------------------------<StyleType= "Text/css" >body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,p,th,td{margin:0;padding:0;}Body{min-width:320px;background-color: #f6f7f7;}a,img{border:0;}Span{blr:expression (This.onfocus=this.blur ())}: focus{outline:0;}/* Remove the dashed box from the A-label to avoid strange areas of selection */*{-webkit-tap-highlight-color:rgba (255,0,0,0);}. index_banner{position:relative;width:100%;}. Index_banner Ul{overflow-x:hidden;}. Index_banner li{position:absolute;top:0;left:0;overflow:hidden;width:100%;}. index_banner li a{display:block;margin:0 Auto;}. Index_banner Cite{position:absolute;bottom:-50%;left:50%;z-index:999;display:block;height:15px;_display:none;}. Index_banner cite span{float:left;display:block;margin:0 4px;width:12px;height:12px;border-radius:50%; Background-color: #e5e5e5; opacity:.8;cursor:pointer;}. Index_banner cite span:hover{background-color: #f5f5f5;}. Index_banner cite span.cur{background-color: #1d8bd8; cursor:default;}. Clear{clear:both;}</Style></Head><Body><DivClass= "Index_banner"Id= "Banner_tabs" ><Ul><li><Ahref= "#"target= "_blank" ><ImgSrc= "Http://img.shangdaotong.com/UploadImage/Adadvert/AdCreativeImage/201605190944260001.jpg"Width= "100%" ></a></Li><li><Ahref= "#"target= "_blank" ><ImgSrc= "Http://img.shangdaotong.com/UploadImage/Adadvert/AdCreativeImage/201605191837390018.jpg"Width= "100%" ></a></Li></Ul><!--here the IMG is used to occupy a bit, in the actual use, you can make another full empty picture--<ImgStyle= "Visibility:hidden;"Src= "Images/index_banner1.jpg"Width= "100%" ><Cite><Spanclass= "cur" ></Span><span></Span></Cite><DivClass= "Clear" ></Div></Div><ScriptType= "Text/javascript" >(function () {if (! Function.prototype.bind) {Function.prototype.bind = function (obj) {var owner = This,args = Array.prototype.slice.call (arguments), callobj = Array.prototype.shift.call (args);return function (e) {e=e| | top.window.event| | Window.event;owner.apply (Callobj,args.concat ([E]));};}})();var banner_tabs = function (ID) {THIS.CTN = document.getElementById (ID);This.adlis = null;This.btns = null;This.animstep = 0.2;//Animation speed 0.1~0.9This.switchspeed = 6;//Auto play interval (s)this.defopacity = 1;this.tmpopacity = 1;This.crtindex = 0;This.crtli = null;this.adlength = 0;This.timeranim = null;This.timerswitch = null;This.init ();};Banner_tabs.prototype = {Fnanim:function (Toindex) {if (This.timeranim) {window.cleartimeout (This.timeranim);}if (this.tmpopacity <= 0) {this.crtLi.style.opacity = This.tmpopacity = this.defopacity;This.crtLi.style.filter = ' Alpha (opacity= ' + this.defopacity*100 + ') ';This.crtLi.style.zIndex = 0;This.crtindex = Toindex;Return}this.crtLi.style.opacity = This.tmpopacity = This.tmpopacity-this.animstep;This.crtLi.style.filter = ' Alpha (opacity= ' + this.tmpopacity*100 + ') ';This.timeranim = Window.settimeout (This.fnAnim.bind (This,toindex), 50);},Fnnextindex:function () {Return (This.crtindex >= this.adlength-1)? 0:this.crtindex+1;},Fnswitch:function (Toindex) {if (This.crtindex==toindex) {return;}This.crtli = This.adlis[this.crtindex];for (Var i=0;i<this.adlength;i++) {This.adlis[i].style.zindex = 0;}This.crtLi.style.zIndex = 2;This.adlis[toindex].style.zindex = 1;for (Var i=0;i<this.adlength;i++) {This.btns[i].classname = ";}This.btns[toindex].classname = ' cur 'This.fnanim (Toindex);},Fnautoplay:function () {This.fnswitch (This.fnnextindex ());},Fnplay:function () {This.timerswitch = Window.setinterval (This.fnAutoPlay.bind (this), this.switchspeed*1000);},Fnstopplay:function () {Window.cleartimeout (This.timerswitch);},Init:function () {this.adlis = this.ctn.getElementsByTagName (' li '); this.btns = This.ctn.getElementsByTagName (' cite ') [0].getelementsbytagname (' span '); this.adlength = this.adLis.length; for (var i=0,l=this.btns.length;i<l;i++) {with ({i:i}) { this.btns[i].index = i; this.btns[i].onclick = This.fnSwitch.bind (this,i); this.btns[i].onclick = This.fnSwitch.bind (this,i); }}this.adlis[this.crtindex].style.zindex = 2; This.fnplay (); this.ctn.onmouseover = This.fnStopPlay.bind (this); this.ctn.onmouseout = This.fnPlay.bind (this); }};var player1 = new Banner_tabs (' Banner_tabs ');</script></body>
Adaptive Screen Focus chart
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
