<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Untitled Document </title>
<style>
UL {padding:0; margin:0;}
Li {list-style:none;}
Body {background: #333;}
. box {width:400px; height:500px; position:relative; Background:url (img/loader_ico.gif) no-repeat center #fff; float: Left margin-right:60px; }
. box img {width:400px; height:500px;}
. box ul {width:40px; position:absolute; top:0; right:-50px;}
. box Li {width:40px; height:40px; margin-bottom:4px; background: #666;}
. box. Active {background: #FC3;}
. box span {top:0;}
. box p {bottom:0; margin:0;}
. Box P,.box span {position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color: #fff; Background: #000; }
</style>
<script>
/*
Reusing code:
1, try to ensure that the HTML code structure consistent, you can select child elements through the parent
2, the core main program implementation, with functions wrapped up
3, the different values in each group to find out, through the transfer of parameters to achieve
*/
Window.onload = function () {
Fntab (' Pic1 ', [' img/1.png ', ' img/2.png ', ' img/3.png ', ' img/4.png '], [' Little pet ', ' picture Two ', ' Picture Three ', ' mask '], ' onclick ');
Fntab (' Pic2 ', [' img/2.png ', ' img/3.png ', ' img/4.png '], [' Picture Two ', ' Picture Three ', ' mask '], ' onmouseover ');
};
function Fntab (ID, Arrurl, arrtext, evt) {
var odiv = document.getElementById (ID);
var oimg = odiv.getelementsbytagname (' img ') [0];
var Ospan = odiv.getelementsbytagname (' span ') [0];
var OP = odiv.getelementsbytagname (' P ') [0];
var Oul = odiv.getelementsbytagname (' ul ') [0];
var aLi = oul.getelementsbytagname (' li ');
var num = 0;
for (var i=0; i<arrurl.length; i++) {
oul.innerhtml + = ' <li></li> ';
}
Initialization
function Fntab () {
OIMG.SRC = Arrurl[num];
ospan.innerhtml = 1+num+ '/' +arrurl.length;
op.innerhtml = Arrtext[num];
for (var i=0; i<ali.length; i++) {
Ali[i].classname = ";
}
Ali[num].classname = ' active ';
}
Fntab ();
for (var i=0; i<ali.length; i++) {
Ali[i].index = i; Index value
ALI[I][EVT] = function () {
num = This.index;
Fntab ();
};
}
}
</script>
<body>
<div id= "Pic1" class= "box" >
<span> quantity is loading in ......</span>
<p> text description loading in ......</p>
<ul></ul>
</div>
<div id= "Pic2" class= "box" >
<span> quantity is loading in ......</span>
<p> text description loading in ......</p>
<ul></ul>
</div>
</body>
Multiple carousel graphs or tabs are displayed on one page, using code reuse
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
