/*
Summary of Ideas:
1. To achieve the function of the picture scrolling, the mouse time to get the current Li Index, set ndex self-increment function, to achieve fade effect functions
2. Entire implementation effect one pass index to the main line
3. My Code-writing process
---->a. First write a function to implement the image switch, here is mainly to include for the calendar times so the picture and set display to none and pass index (here the index value to inew);
---->b. When you write the mouse through the time to get index, here must pass through the calendar and assignment of the mouse through the index assigned to a inew, and passed to the ability to achieve the image switch function move ();
---->c. Writing effect functions that implement picture fades
The function of the---->d.move () function can be written in the event of writing the mouse through Li and writing the fading function, so the train of thought will be smooth.
*/
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title></title>
<style>
*{margin:0;padding:0;}
#wrap {
width:500px;height:375px;overflow:hidden;margin:0 Auto;
position:relative;;
}
#list {
Position:absolute;
bottom:10px;
right:10px;
}
ul{
List-style:none;
}
li{float:left;width:20px;height:20px;margin:1px 1px;
border:1px #333333 dashed;text-align:center;line-height:
20px;background-color:aquamarine;}
. Active{background-color:royalblue;}//when the mouse passes through Li, the style of the call
</style>
<script>
window.onload= function ds () {
var im = document.getElementById ("box"). getElementsByTagName ("img");
var list= document.getelementbyid ("list"). getElementsByTagName ("Li");
var timer;
var timers;//There is a total of two timers, one for their own initiative to switch pictures, one is for the implementation of the Fade effect
var inew=0;
var al=1;
function CGS () {
Im[inew].style.filter= "Alpha (opacity=" +al+ ') ';
im[inew].style.opacity=al/100;
if (al<100) {
al+=2;
}
}
function Move () {
for (var i = 0; i < im.length; i++) {
List[i]. Classname= "";/This must be an array
Im[i].style.display = "None";
al=0;
Clearinterval (timers);
}
Im[inew].style.display = "block";
List[inew].classname= "Active"
Timers=setinterval (cgs,10);
}
for (var i = 0; i < list.length; i++) {
List[i].index = i;
//I must be assigned to the list "I" here to get index;(I feel that this explanation is not very right, but also hope for the opinion
)
list[i].onmouseover = function () {
INew = This.index; //Gets the index of the mouse over time
move ();
This.classname = "active";//can also call styles here
}
}
Timer=setinterval (function () {
inew++;
if (inew>=list.length) {
inew=0;
}
Move ();
}
, +);
}
</script>
<body>
<div id= "Wrap" >
<div id= "box" >
<ul id= "List" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
JavaScript focus Map (ability to switch proactively)