This article illustrates the method of JS to realize flash slide picture switching effect. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<meta http-equiv= "Content-language" content= "gb2312"/>
<meta name= "Author" content= "Rainoxu"/>
<TITLE>JS analog Flash slide picture toggle effect </title>
<body>
<style type = "Text/css" >
/* <! [cdata[* *
ul,li{
padding:0;
margin:0;
List-style:none;
}
#flashBox {
width:326px;
height:246px;
border:1px solid #EEE;
position:relative;
}
#flashBox img{
/* Initial do not show * *
Display:none;
/* Use a border to achieve the vacancy, because margin and paading sometimes cause some trouble.
BORDER:3PX solid #FFF;
}
#flashBox ul{
Position:absolute;
right:7px;
bottom:9px;
FONT:9PX Tahoma;
}
#flashBox ul li{
Display:block;
Float:left;
width:12px;
height:12px;
line-height:12px;
margin-right:3px;
border:1px solid #999;
Background: #F0F0F0;
Text-align:center;
Cursor:pointer;
}
#flashBox ul li.hover{
border-color:red;
Background: #FFE1E1;
color:red;
}
*]]> * *
</style>
<script type= "Text/javascript" >
function Flashboxctrl (o) {
This.obj=document.getelementbyid (o);
This private method is written, but it is not used for a while
function AddListener (ele,eventname,functionbody) {
if (ele.attachevent) {
Ele.attachevent ("On" +eventname, Functionbody);
}else if (ele.addeventlistener) {
Ele.addeventlistener ("On" +eventname,functionbody, false);
}else{
return false;
}
}
Class
This.init=function () {
var objimg=this.obj.getelementsbytagname ("img");
var taglength=objimg.length;
if (taglength>0) {
var oul=document.createelement ("ul");
Oul.setattribute ("id", o+ "Numtag");
for (Var i=0;i<taglength;i++) {
var oli=oul.appendchild (document.createelement ("Li"));
if (i==0) {
Oli.setattribute ("Class", "hover"); Set the first one to highlight when initializing
Oli.setattribute ("ClassName", "hover");
}
Set the number of labels
Oli.appendchild (document.createTextNode (i+1));
}
This.obj.appendChild (Oul);
objimg[0].style.display= "Block";
Set Label events
var otag=this.obj.getelementsbytagname ("Li");
for (Var i=0;i<otag.length;i++) {
Otag[i].onmouseover=function () {
for (j=0;j<otag.length;j++) {
Otag[j].classname= "";
Objimg[j].style.display= "None";
}
This.classname= "hover";
objimg[this.innerhtml-1].style.display= "Block";
}
}
}
};
The automatic scrolling method hasn't been written yet.
This.imgroll=function () {};
Automatically load the init () method when an object is generated to initialize the object
This.init ();
}
</script>
<div id= "Flashbox" >
</div>
<script type= "Text/javascript" >
Generate an Object
New Flashboxctrl ("Flashbox");
</script>
</body>
I hope this article will help you with your JavaScript programming.
