Home > Developer > JavaScript
See programme I for specific requirements.
This program is given by the teacher, compared to a more professional program.
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title></title>6<style type= "Text/css" >7 #main {8 border:solid 1px red;9 margin:20px Auto;Ten width:500px; One } A #top { -text-Align:center; - } the #imgl, #imgr { -margin-bottom:70px; - } - #img { + margin:0px 50px; - } + . initclass{ A width:50px; at border:solid 2px #fff; - margin:10px 5px; - } - . focusclass{ - width:50px; - border:solid 2px Red; in margin:10px 5px; - } to</style> +<script type= "Text/javascript" src= "Js/system.js" ></script> - the<body> *<div id= "Main" > $<div id= "Top" >Panax Notoginseng - the +</div> A<div id= "Bottom" > the + - $ $ - - the</div> -</div>Wuyi<script type= "Text/javascript" > the varSlide={ -ARRIMG:NewArray ("Images/1.jpg", "images/2.jpg", "images/3.jpg", Wu"Images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg"), -Initclass: "Initclass", AboutFocusclass: "Focusclass", $Index:1, -Arrmax:7, -Imgmain: "img" - } Aslide.top= { +Navevent:function () { the //The upper part of the large picture shows the image of the index corresponding to the summation -$$ (slide.imgmain). src = slide.arrimg[slide.index-1]; $ //group the navigation picture name according to the focus subscript value the varn = "img" +Slide.index; the //perform a click event for the corresponding navigation picture the $$ (N). Click (); the }, - //Handle the logic on a part of the page inClickright:function () { the //Click the right button to handle the event the Console.log (slide.index); About //when the current label is less than or equal to the maximum number of pictures the if(Slide.index <Slide.arrmax) { the //accumulate the current focus subscript value theslide.index++; + //picture Navigation effect when right click is executed - slide.top.navEvent (); the }Bayi }, theClickleft:function () { the //Click the right button to handle the event - Console.log (slide.index); - if(Slide.index > 1) { the //accumulate the current focus subscript value theslide.index--; the //picture Navigation Effect when you click the left button the slide.top.navEvent (); - } the } the } theSlide.bottom= {94Initimgclass:function () { the //Initialize the style of all bottom pictures the for(vari = 1; I <= Slide.arrmax; i++) { the varn = "img" +i;98$$ (n). ClassName =Slide.initclass; About } - },101Initpage:function () {102 //Handle the logic of the next part of the page103$$ ("IMGL"). onclick=function(){104 slide.top.clickLeft (); the }106$$ ("Imgr"). onclick=function(){107 slide.top.clickRight ();108 }109 //get all the bottom slices the for(vari = 1; I <= Slide.arrmax; i++) {111 //bind a point-and-click event for each picture the varn = "img" +i;113$$ (n). onclick =function () { the //Initialize all styles the Slide.bottom.initImgClass (); the //The picture element itself gets the focus style117 This. ClassName =Slide.focusclass;118 //Show large images of click-Small images in the upper picture119$$ (slide.imgmain). src=slide.arrimg[ This. getattribute ("Data-index")-1]; - //re-record the corresponding subscript position of the focus picture in the array121slide.index= This. getattribute ("Data-index");122 }123 }124 } the }126 slide.bottom.initPage ();127</script> -</body>129about using JavaScript to achieve Picture click Toggle (with change navigation Picture Scheme II)
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
