JS + CSS: How to automatically change the switching direction of image slides
This article mainly introduces how to automatically change the switching direction of javascript + CSS image slides. The example shows how to use javascript to operate on slides in the switching direction of images, which has some reference value, for more information, see
This article describes how to automatically change the switching direction of image slides using JS + CSS. Share it with you for your reference. The specific implementation method is as follows:
The 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> Effect of automatically changing the switching direction of image slides in JS + CSS </title>
<Style>
Body, div, ul, li {margin: 0; padding: 0 ;}
Ul {list-style-type: none ;}
Body {background: #000; text-align: center; font: 12px/20px Arial ;}
# Box {position: relative; width: 322px; height: 172px; background: # fff; border-radius: 5px; border: 8px solid # fff; margin: 10px auto ;}
# Box. list {position: relative; width: 320px; height: 240px; overflow: hidden; border: 1px solid # ccc ;}
# Box. list li {position: absolute; top: 0; left: 0; width: 320px; height: 240px; opacity: 0; filter: alpha (opacity = 0 );}
# Box. list li. current {opacity: 1; filter: alpha (opacity = 100 );}
# Box. count {position: absolute; right: 0; bottom: 5px ;}
# Box. count li {color: # fff; float: left; width: 20px; height: 20px; cursor: pointer; margin-right: 5px; overflow: hidden; background: # F90; opacity: 0.7; filter: alpha (opacity = 70); border-radius: 20px ;}
# Box. count li. current {color: # fff; opacity: 1; filter: alpha (opacity = 100); font-weight: 700; background: # f60 ;}
# Tmp {width: 100px; height: 100px; background: red; position: absolute ;}
</Style>
<Script type = "text/javascript">
Window. onload = function ()
{
Var oBox = document. getElementById ("box ");
Var aUl = document. getElementsByTagName ("ul ");
Var aImg = aUl [0]. getElementsByTagName ("li ");
Var aNum = aUl [1]. getElementsByTagName ("li ");
Var timer = play = null;
Var I = index = 0;
Var bOrder = true;
// Switch button
For (I = 0; I <aNum. length; I ++)
{
ANum [I]. index = I;
ANum [I]. onmouseover = function ()
{
Show (this. index)
}
}
// Close the timer
OBox. onmouseover = function ()
{
ClearInterval (play)
};
// Start automatic playback with the mouse
OBox. onmouseout = function ()
{
AutoPlay ()
};
// Automatic playback function
Function autoPlay ()
{
Play = setInterval (function (){
// Determine the playing Sequence
BOrder? Index ++: index --;
// Forward
Index> = aImg. length & (index = aImg. length-2, bOrder = false );
// Reverse Order
Index <= 0 & (index = 0, bOrder = true );
// Call a function
Show (index)
},2000 );
}
AutoPlay (); // Application
Function show ()
{
Index =;
Var alpha = 0;
For (I = 0; I <aNum. length; I ++) aNum [I]. className = "";
ANum [index]. className = "current ";
ClearInterval (timer );
For (I = 0; I <aImg. length; I ++)
{
AImg [I]. style. opacity = 0;
AImg [I]. style. filter = "alpha (opacity = 0 )";
}
Timer = setInterval (function (){
Alpha + = 2;
Alpha> 100 & (alpha = 100 );
AImg [index]. style. opacity = alpha/100;
AImg [index]. style. filter = "alpha (opacity =" + alpha + ")";
Alpha = 100 & clearInterval (timer)
}, 20 );
}
};
</Script>
</Head>
<Body>
<Div id = "box">
<Ul class = "list">
<Li class = "current"> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
<Ul class = "count">
<Li class = "current"> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
<Li> 5 </li>
</Ul>
</Div>
</Body>
</Html>
I hope this article will help you design javascript programs.