1. Use the image width display position to play the image. Technology :. offsetWidth, aBtn [I]. index = I, setInterval (), oUl [0]. style. left =, onclick ()
2. Apply an array to the image for loop playback. Technology: setInterval (). No onclick ()
IMG 12js.html
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en">
<Head>
<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 {
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 ("");
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>
</Head>
<Body>
<Div id = "slide">
<A id = "btnLeft" href = "javascript: void (0);"> </a>
<A id = "btnRight" href = "javascript: void (0);"> </a>
<! -- When 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>
</Html>
IMG. html
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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> -->
</Head>
<Body>
</Body>
</Html>