Auto-Play and manual switch for picture making

Idea: Put the picture that you want to play into the collection, set a div, put the picture in sequence from the collection, and place it in the Div, and set a variable that is linked to the index of the collection element and click Change to get the index of the current picture to toggle the picture.

Overall code:

<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/><title> Picture Carousel </title><style>*{margin:0px auto; padding:0px;} #kuangjia {width:600px; height:450px; border: #F00 solid 3px; background-size:cover; background-repeat:no-repeat;}. t1{width:40px, height:40px, background-repeat:no-repeat; background-size:contain; cursor:pointer;} #t2 {float: Left; margin:205px 0px 0px 20px; background-Image:url (zuo.png);} #t3 {float: Right; margin:205px 20px 0px 0px; background-Image:url (you.png);}</style>"Kuangjia"><!--Big Div as frame--<divclass="T1"Id="T2"onclick="(DD ( -1))"></div> <divclass="T1"Id="T3"onclick="(DD (1))"></div></div></body>varJh=NewArray (); jh[0]="URL (1-1.jpg)"; jh[1]="URL (2-2.jpg)"; jh[2]="URL (3-3.jpg)"; jh[3]="URL (4-4.jpg)"; jh[4]="URL (5-5.jpg)";varKj=document.getelementbyid ("Kuangjia";<!--get the label for the frame Div, change the background below--varx=-1;<!--define variable x, index--varl=jh.length;<!--Gets the number of elements in the collection--function lb () {x++; if(x==l) {x=0; } kj.style.backgroundImage=Jh[x]; Window.settimeout ("lb ()", -;<!--2s to play back the pictures in the collection again--}window.settimeout ("lb ()",0);<!--Start the carousel--function dd (m) {x=x+m; if(x==l) {x=0;} Else if(x==-1) {x=l;} Kj.style.backgroundImage=jh[x];}</script>

Photo Carousel All Code

Here is the step and step code:

1. Set the large div frame and left-to-right button

<title> Picture Carousel </title><style>*{margin:0px auto; padding:0px;} #kuangjia {width:600px; height:460px; border: #F00 solid 3px; background-size:contain; background-repeat:no-repeat;}. t1{width:60px, height:60px, background-repeat:no-repeat; background-Size:contain;} #t2 {float: Left; margin:200px 0px 0px 20px; background-Image:url (zuo.png);} #t3 {float: Right; margin:200px 20px 0px 0px; background-Image:url (you.png);}</style>"Kuangjia"><!--Big Div as frame--<divclass="T1"Id="T2"></div> <divclass="T1"Id="T3"></div></div></body>

Building Framework

2. Define a collection, put the picture that will be played into the collection

varJh=NewArray (); jh[0]="URL (1-1.jpg)"; jh[1]="URL (2-2.jpg)"; jh[2]="URL (3-3.jpg)"; jh[3]="URL (4-4.jpg)"; jh[4]="URL (5-5.jpg)";</script>

var jh=new Array ();

3, set the auto play function: Every 2s switch a picture ()

varKj=document.getelementbyid ("Kuangjia";<!--get the label for the frame Div, change the background below--varx=-1;<!--define variable x, index--varl=jh.length;<!--Gets the number of elements in the collection--function lb () {x++; if(x==l) {x=0; } kj.style.backgroundImage=Jh[x]; Window.settimeout ("lb ()", -;<!--2s to play back the pictures in the collection again--}window.settimeout ("lb ()",0);<!--start the Carousel--></script>

Carousel

4. Set up left or right click to transduction event

Body in<div id="Kuangjia"><!--Big Div as frame--<divclass="T1"Id="T2"onclick="(DD ( -1))"></div> <divclass="T1"Id="T3"onclick="(DD (1))"></div></div>post function dd (m) {x=x+m; if(x==l) {x=0;} Else if(x==-1) {x=l;} Kj.style.backgroundImage=jh[x];}

Click the button

Point left button variable-1, determine whether less than 0, if less than 0 let x=l; point right button variable +1, if equal to L, let x=0

Auto-Play and manual switch for picture making