Picture achieve the specified code of a switch:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<Title> js picture transition effects specified </ title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text-align:center; line-height:30px; margin:40px auto;}
#pic{ height:350px; width:500px; border:2px solid yellow; position:relative; margin:0 auto;}
#pic img{ height:350px; width:500px;}
ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin-bottom:5px; list-style:none;}
#pic .active{ background:yellow;}
#pic p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
p{ bottom:0;}
span{ top:0;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('pic');
var = oImg oDiv.getElementsByTagName ( "img") [0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP oDiv.getElementsByTagName ( 'p') [0];
OUL oDiv.getElementsByTagName var = ( 'l') [0];
var = oUl.getElementsByTagName Ali (that);
var arrUrl = [ 'imgs / z.1.jpg', 'imgs / z.2.jpg', 'imgs / z.3.jpg', 'imgs / z.4.jpg'];
var arrText = [ 'looks into the distance,' 'playing at the beach,' 'the world of love', 'beautiful garlands'];
var n = 0;
for( var i=0;i<arrUrl.length;i++){
oUl.innerHTML += '<li></li>';
} // find the code in the li
//initialization
oImg.src = arrUrl[num];
oSpan.innerHTML = 1 + num +'/' +arrUrl.length;
oP.innerHTML arrText = [num];
aLi [num] .className = 'active'; // use className method specified other colors becomes li
for( var i=0;i<aLi.length;i++){
aLi [i] .index = i; // defines the index value
aLi[i].onclick = function(){
oImg.src = arrUrl[this.index];
oSpan.innerHTML = 1 + this.index + '/' + arrUrl.length;
oP.innerHTML = arrText [this.index]; // htis used in conjunction with an index value of the property
for( var i=0;i<aLi.length;i++){
aLi[i].className = '';
}
this.className = 'active';
} // click here which li, li which becomes the current method of li
}
}
</script>
</head>
<body>
<H1> js picture transition effects specified </ h1>
<div id="pic">
<img src="" alt="" />
<Span> is the number of calculations ... </ span>
<P> text is loading ... </ p>
<ul></ul>
</div>
</body>
</html>
When you click this code which li, li on which the basic idea of the current method of li is:
Empty class attribute of all li, li to the current click Add a className attribute.
This method, although violent, but very practical.
Picture achieve the specified code two switches:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<Title> js picture transition effects specified </ title>
<style>
h1{ height:30px; width:300px; border:2px solid pink; font-size:25px; text-align:center; line-height:30px; margin:40px auto;}
#pic{ height:350px; width:500px; border:2px solid yellow; position:relative; margin:0 auto;}
#pic img{ height:350px; width:500px;}
ul{ padding:0; margin:0; position:absolute; top:0; right:-80px;}
li{ height:50px; width:50px; background:pink; border:2px solid #CCC; margin-bottom:5px; list-style:none;}
#pic .active{ background:yellow;}
#pic p,span{ height:30px; width:500px; background:#CCC; font-size:20px; text-align:center; line-height:30px; color:#FFF; position:absolute; left:0; margin:0;}
p{ bottom:0;}
span{ top:0;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('pic');
var = oImg oDiv.getElementsByTagName ( "img") [0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP oDiv.getElementsByTagName ( 'p') [0];
OUL oDiv.getElementsByTagName var = ( 'l') [0];
var = oUl.getElementsByTagName Ali (that);
var oldLi = null; // definition of a variable name
var arrUrl = [ 'imgs / z.1.jpg', 'imgs / z.2.jpg', 'imgs / z.3.jpg', 'imgs / z.4.jpg'];
var arrText = [ 'looks into the distance,' 'playing at the beach,' 'the world of love', 'beautiful garlands'];
var n = 0;
for( var i=0;i<arrUrl.length;i++){
oUl.innerHTML += '<li></li>';
} // find the code in the li
oldLi = aLi [num]; // li is the value stored in this variable
//initialization
oImg.src = arrUrl[num];
oSpan.innerHTML = 1 + num +'/' +arrUrl.length;
oP.innerHTML arrText = [num];
aLi [num] .className = 'active'; // use className method specified other colors becomes li
for( var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onclick = function(){
oImg.src = arrUrl[this.index];
oSpan.innerHTML = 1 + this.index + '/' + arrUrl.length;
oP.innerHTML = arrTextt [this.index]; // htis used in conjunction with an index value of the property
oldLi.className = '';
oldLi = this; // clicks at this time value is set before a current value of change when a click conveniently
this.className = 'active';
} // click here which li, li which becomes the current method of li
}
}
</script>
</head>
<body>
<H1> js picture transition effects specified </ h1>
<div id="pic">
<img src="" alt="" />
<Span> is the number of calculations ... </ span>
<P> text is loading ... </ p>
<ul></ul>
</div>
</body>
</html>