1. Use picture width display position to play picture, technology:. offsetwidth, Abtn[i].index = i, SetInterval (), Oul[0].style.left =, onclick ()
2, using the array into the picture by the row carousel, Technology: SetInterval (). No onclick ()
Picture Wheel broadcast 12js.html
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 "/>
<title>images slide</title>
<style type= "Text/css" >
* {
margin:0px;
padding:0px;
}
Li {
List-style:none;
}
IMG {
border:0;
}
A
Text-decoration:none;
}
#slide {
width:800px;
height:400px;
box-shadow:0px 0px 5px #c1c1c1;
margin:20px Auto;
position:relative;
Overflow:hidden;
}
#slide ul {
Position:absolute;
left:0px;
top:0px;
height:400px;
width:11930px;
}
#slide ul Li {
width:800px;
height:400px;
Overflow:hidden;
Float:left;
}
#slide. ico {
width:800px;
height:20px;
Overflow:hidden;
Text-align:center;
Position:absolute;
left:0px;
bottom:10px;
Z-index:1;
}
#slide. ico a {
Display:inline-block;
width:10px;
height:10px;
Background:url (out.png) no-repeat 0px 0px;
margin:0px 5px;
}
#slide. ico. Active {
Background:url (out1.png) no-repeat 0px 0px;
}
#btnLeft {
width:60px;
height:400px;
left:0px;
top:0px;
Background:url () no-repeat 0px 0px;
Position:absolute;
Z-index:2;
}
#btnLeft: hover {
Background:url () no-repeat 0px 0px;
}
#btnRight {
width:60px;
height:400px;
right:0px;
top:0px;
Background:url () no-repeat 0px 0px;
Position:absolute;
Z-index:2;
}
#btnRight: hover {
Background:url () no-repeat 0px 0px;
}
</style>
<script type= "Text/javascript" >
Window.onload = function () {
var Oico = document.getElementById ("ico");
var abtn = Oico.getelementsbytagname ("a");
var oslide = document.getElementById ("slide");
var Oul = oslide.getelementsbytagname ("ul");
var aLi = oul[0].getelementsbytagname ("Li");
var obtnleft = document.getElementById ("Btnleft");
var obtnright = document.getElementById ("Btnright");
var basewidth = ali[0].offsetwidth;
alert (basewidth);
Oul[0].style.width = basewidth * ali.length + "px";
var inow = 0;
for (Var i=0;i<abtn.length;i++) {
Abtn[i].index = i;
Abtn[i].onclick = function () {
alert (This.index);
alert (oul[0].style.left);
Move (This.index);
Aico[this.index].classname = "active";
}
}
Obtnleft.onclick = function () {
Inow + +;
Document.title = Inow;
Move (Inow);
}
Obtnright.onclick = function () {
Inow--;
Document.title = Inow;
Move (Inow);
}
var curindex = 0;
var timeinterval = 1000;
SetInterval (Change,timeinterval);
function Change () {
if (Curindex = = abtn.length) {
Curindex = 0;
} else {
Move (Curindex);
Curindex + 1;
}
}
function Move (index) {
Document.title = index;
if (index>ali.length-1) {
index = 0;
Inow = index;
}
if (index<0) {
index = ali.length-1;
Inow = index;
}
for (Var n=0;n<abtn.length;n++) {
Abtn[n].classname = "";
}
Abtn[index].classname = "active";
Oul[0].style.left =-index * basewidth + "px";
Buffer (oul[0],{
Left:-index * basewidth
},8)
}
}
</script>
<body>
<div id= "Slide" >
<a id= "Btnleft" href= "javascript:void (0);" ></a>
<a id= "Btnright" href= "javascript:void (0);" ></a>
<!--when the change next image:style= "left:-(n-1) *800px;" -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id= "ico" class= "ico" >
<a class= "Active" href= "javascript:void (0);" ></a>
<a href= "javascript:void (0);" ></a>
<a href= "javascript:void (0);" ></a>
<a href= "javascript:void (0);" ></a>
<a href= "javascript:void (0);" ></a>
<a href= "javascript:void (0);" ></a>
</div>
</div>
</body>
The picture is played automatically. html
Copy Code code 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=utf-8 "/>
<title>images</title>
<script type= "Text/javascript" >
var curindex = 0;
var timeinterval = 1000;
var arr = new Array ();
Arr[0] = "1.jpg";
ARR[1] = "2.jpg";
ARR[2] = "3.jpg";
ARR[3] = "4.jpg";
ARR[4] = "5.jpg";
ARR[5] = "6.jpg";
ARR[6] = "7.jpg";
SetInterval (Changeimg,timeinterval);
function changeimg () {
var obj = document.getElementById ("obj");
if (Curindex = = arr.length-1) {
Curindex = 0;
} else {
Curindex + 1;
}
OBJ.SRC = Arr[curindex];
}
</script>
<!--<script language= "JavaScript" >
SetInterval (test,1000);
var array = new Array ();
var index = 0;
var array = new Array ("Image/1.jpg", "image/2.jpg", "image/3.jpg", "image/4.jpg", "image/5.jpg", "image/6.jpg", "image/ 7.jpg "," image/8.jpg "," image/9.jpg "," image/10.jpg ");
function Test () {
var Myimg=document.getelementbyid ("IMGs");
if (index==array.length-1)
{index=0;} else{index++;}
Myimg.src=array[index];
}
</script>-->
<body>
</body>
