This paper illustrates the method of js+css to realize the effect of fading focus picture slide. 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=utf-8 "/>
<title> a js+css fade focus picture slide switch effect </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;
Toggle button
for (i = 0; i < anum.length; i++)
{
Anum[i].index = i;
Anum[i].onmouseover = function ()
{
Show (This.index)
}
}
Mouse across the timer off
Obox.onmouseover = function ()
{
Clearinterval (play)
};
Start auto play with mouse left
Obox.onmouseout = function ()
{
AutoPlay ()
};
Auto Play function
function AutoPlay ()
{
Play = SetInterval (function () {
index++;
Index >= aimg.length && (index = 0);
Show (index);
},2000);
}
AutoPlay ()//Apply picture toggle fade effect
Function Show (a)
{
index = A;
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 > MB && (alpha =100);
aimg[index].style.opacity = alpha/100;
Aimg[index].style.filter = "alpha (opacity =" + Alpha + ")";
Alpha = = && Clearinterval (timer)
},20);
}
};
</script>
<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>
I hope this article will help you with your JavaScript programming.
