< turn >url:http://www.cnblogs.com/rubylouvre/archive/2009/09/30/1576699.html#index5
:
Automatically rotate pictures, tap digital toggle, and display text
<!doctype html><title>javascript picture rotation by Masaki </title><meta charset= "utf-8"/><meta name= " Keywords "content=" javascript picture rotation by Masaki "/><meta name=" description "content=" JavaScript picture rotation by Masaki "/>< Style type= "Text/css" >#album {/*albums*/position:relative; width:400px; height:300px; border:10px solid #EFEFDA;/*album Border*/Overflow:hidden;/*Hide Tip*/} #album DT {/*the content display area of the album, which contains the photo with the flip bar below*/margin:0;/*Remove the browser's default settings*/padding:0;/*Remove the browser's default settings*/width:400px; height:300px; Overflow:hidden;/*Focus so that only one picture is displayed at a time*/} #album img {border:0px; } #album DD {/*Flip Bar*/Position:absolute; right:0px; bottom:10px; } #album a {display:block;/*Let it have a box model*/ float: Left; Margin-right:10px;/*staggered lattice*/width:15px;/*Square*/height:15px; Line-height:15px; Text-align:center;/*Center Display*/text-decoration:none;/*Remove Underline*/color:#808080; Background:transparent URL (http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat-15px 0;} #album a:hover, #album a.hover{color: #F8F8F8; Background-position:0 0; }</style>functionImagerotater (ID) {varCases = "", Album=document.getElementById (ID), images= Album.getelementsbytagname ("img"), Links= Album.getelementsbytagname ("a"), DT= Album.getelementsbytagname ("DT") [0], length=Images.length, Aindex= 1, Abefore=length; for(vari=0;i< length;i++) {Cases+ = Images[i].id + ': ' +images[i].getattribute ("src") + ' ", '} images[0].style.csstext = "position:absolute;top:0;left:0;";//fix Image Position error problem vartip = document.createelement ("DD"); Tip.style.cssText= "Position:absolute;bottom:0;height:20px;width:380px;padding:10px;color: #fff; background: #fff;"; Album.insertbefore (tip,dt.nextsibling); if(!+ "\v1") {Tip.style.color= "#369"; Tip.style.filter= "Alpha (opacity=67)" }Else{Tip.style.cssText+ = "Background:rgba (164, 173, 183,. 65);"} cases= eval ("{" +cases.replace (/,$/, "") + "}");//equivalent to Switch-case code block for(vari=0;i<length;i++) {//implement click to toggle PictureLinks[i].onclick =function(e) {e=e | |window.event; varindex = This. toString (). Split ("#") [1]; Aindex= Index.charat (index.length-1);//☆☆☆☆IMAGES[0].SRC =Cases[index]; Tip.innerhtml= Images[aindex-1].getattribute ("alt"); !+ "\v1"? (E.returnvalue =false):(E.preventdefault ()); } } varprefix = images[0].id.substr (0,images[0].id.length-1); (function(){//Implement auto-rotate picturesSetTimeout (function(){ if(Aindex >length) {Aindex= 1; } images[0].SRC = cases[prefix+Aindex]; Tip.innerhtml= Images[aindex-1].getattribute ("alt"); Tip.style.bottom= " -40px"; Links[abefore-1].classname = ""; Links[aindex-1].classname = "hover"; Abefore=Aindex; Aindex++; Move (TIP); SetTimeout (Arguments.callee,1500) },1500) })() varmove =function(EL) {varBegin =parsefloat (el.style.bottom), speed= 1; El.bottom=begin; (function() {setTimeout (function() {El.style.bottom= El.bottom + speed + "px";//MovingEl.bottom + =Speed ; speed*= 1.5;//distance to move next if(El.bottom >= 0) {El.style.bottom= "0px"; }Else{setTimeout (Arguments.callee,25);//25 milliseconds per move } },25)}) ()}} window.onload=function(){ Try{Document.execcommand ("Backgroundimagecache",false,true);}Catch(e) {}; Imagerotater ("Album"); }</script>View Code
Area picture rotation
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
