JS case Exercise: Picture Toggle + Toggle Mode

First drawings:

CSS Styles section:

<style> *{margin:0;padding:0}Body{font-family:' Microsoft Yahei ';}. Menu{margin:20px Auto 0;width:550px;text-align:Center;}. Menu H4{Font-weight:Normal;Line-height:50px;}#xh{margin:Auto 30px;}#sx{margin:Auto 30px;}#tab{width:550px;Height:380px;Border:10px Solid Darkgray;position:relative;margin:0 Auto;}#tab a{width:40px;Height:40px;background:Black;Color: White;position:Absolute;Top:160px;font-size:28px;text-align:Center;Opacity:0.6;Filter:Alpha (opacity=60);}#tab a:hover{Opacity:0.8;Filter:Alpha (opacity=80);}#spanID{width:550px;Height:20px;Line-height:20px;background:Black;Color: White;position:Absolute;text-align:Center;Opacity:0.8;Filter:Alpha (opacity=80);}#prev{ Left:10px;cursor:Pointer;}#next{ Right:10px;cursor:Pointer;}#pId{width:550px;Height:30px;Line-height:30px;background:Black;text-align:Center;position:Absolute;Bottom:0px;Color: White;Opacity:0.8;Filter:Alpha (opacity=80);}#imgID{width:550px;Height:380px;}</style>

JS Code section:

<script>varOxh = $ (' XH '); varOSx = $ (' SX '); varOtext = $ (' text '); varOspanid = $ (' Spanid '); varOprev = $ (' prev '); varOnext = $ (' Next '); varOimgid = $ (' Imgid '); varOpid = $ (' pId '); vararr = [' images/tab/1.jpg ', ' images/tab/2.jpg ', ' images/tab/3.jpg ', ' images/tab/4.jpg ']; varArrpid = [' This is the first ', ' This is the second ', ' This is the third one ', ' This is the fourth one ']; varnum = 0; varONOFF =true; //Cyclic switching EventsOxh.onclick =function() {onOff=true; Otext.innerhtml= ' Picture loop toggle '; OText.style.color= ' Red '; }
　　//Sequential switch event Osx.onclick=function() {onOff=false; Otext.innerhtml= ' Picture order toggle '; OText.style.color= ' Blue '; }    //Show first picture by default    functionFuntab () {oimgid.src=Arr[num]; Opid.innerhtml=Arrpid[num]; Ospanid.innerhtml= (num+1) + '/' +(arr.length);    } funtab (); //Next OneOnext.onclick =function() {num++; if(num = =arr.length) {            if(OnOff = =true) {num= 0; } Else{num= Arr.length-1; Alert (' has arrived the last one, ~ ~! ');    }} funtab (); }    //the previous oneOprev.onclick =function() {num--; if(num = =-1){            if(OnOff = =false) {num= 0; Alert (' This is the first one, ~ ~! '); } Else{num= Arr.length-1;    }} funtab (); }    //ID Call general function    function$ (ID) {returndocument.getElementById (ID); }</script>

HTML section:

<!DOCTYPE HTML><HTML><HeadLang= "en">    <MetaCharSet= "Utf-8">    <title>Carousel Switching</title></Head><Body>    <Divclass= "Menu">        <inputID= "XH"type= "button"value= "Loop Play">        <inputID= "SX"type= "button"value= "Sequential Play">        <h4ID= "text">Please select switch mode</h4>    </Div>    <DivID= "tab">        <spanID= "Spanid">Loading in ...</span>        <aID= "Prev"Herf= "javascript:;"><</a>        <aID= "Next"Herf= "javascript:;">></a>        <imgID= "Imgid"src= "Picture loading ...">        <PID= "PId">Loading in ...</P>    </Div></Body></HTML>

JS case Exercise: Picture Toggle + Toggle Mode