<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<script type= "Text/javascript" src= "Http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js" ></script>
<style>
*{margin:0px; padding:0px;}
img{border:0px; float:left; width:25%; height:200px;} Width 100% divided by number of switches
. c{Clear:both}
#tabimg {width:100%; height:200px; overflow:hidden; position:relative}
#mrt {height:200px; Position:absolute}
#mrt2 {position:absolute; top:170px;}
#mrt2 li{z-index:9;width:15px; margin:0px 5px; height:15px; background: #CCCCCC; float:left; List-style:none}
</style>
<body>
<div id= ' tabimg ' >
<div id= ' MRT ' >
</div>
<ul id= ' Mrt2 ' ></ul>
</div>
<script>
JavaScript Document
var time = 2000; Time
var color = ' #CCC '; Focus Color
var hovercolor = ' #333 '; After focus color
var width=document.documentelement.clientwidth;
var inserttext;
var X=document.getelementbyid (' MRT ');
var X2=document.getelementbyid (' tabimg ');
var x3 = document.getElementById (' Mrt2 ');
var length = x.getelementsbytagname ("img"). length;
X3.style.width = length*25+ "px";
X3.style.margin = "0px 0px 0px" +length*25/-2+ "px";
X3.style.left = width/2+ "px";
X.style.width = length*width+ "px";
var int=setinterval ("Move ()", time);
$ (function () {
for (j = 0; J < length; J + +) {
if (j = = 0) {inserttext = "<li style= ' background:" +hovercolor+ "' ></li>"; continue;}
InsertText + = "<li></li>";
x3.innerhtml = InsertText;
}
for (s = 0; s < length; s++) {
X3.getelementsbytagname (' li ') [s].classname = ' btn ';
X3.getelementsbytagname (' li ') [s].id = ' btn ' + s;
}
$ (' #mrt2 Li '). each (function (i) {
$ (this). MouseOver (function () {
Window.clearinterval (int);
$ (' #mrt2 li:eq (' +i+ ') '). CSS (' background ', Hovercolor). Siblings (' Li '). css (' background ', color);
$ ("#mrt"). Stop (). Animate ({left:-width*i+ "px"});
});
});
$ (' #mrt2 Li '). MouseLeave (function () {int = SetInterval (' Move () ', time);
});
});
function Move () {
index =-math.round (parseint (x.style.left)/width) +1;
if (index<length) {
$ ("#mrt"). Stop (). Animate ({left: "-" +width*index+ "px"});
$ ('. btn '). CSS (' background ', color);
$ (' #btn ' +index). CSS (' background ', hovercolor);
}
else{
index = 0;
$ ("#mrt"). Stop (). Animate ({left: "0px"});
$ ('. btn '). CSS (' background ', color);
$ (' #btn0 '). CSS (' background ', hovercolor);
}
}
</script>
</body>
JS Slideshow Exercise (full screen, image customization number)