/*

思路总结：

1.实现图片滚动的function、鼠标经时候获取当前li的index、设置ndex自己主动递增的函数、实现淡入淡出效果的函数

2.整个实现效果一传递index为主线

3.我的编写代码过程

---->a.先编写好实现图片切换的函数，这里主要是包括for历遍所以图片并设置display为none和传递index(这里把index赋值给inew)；

---->b.编写鼠标经过时候获取index，这里必须通过历遍和赋值把鼠标经过的index赋值个inew，并传递给能够实现图片切换的函数move()；

---->c. 编写实现图片淡入淡出的效果函数

---->d.move()函数的功能实现能够在编写鼠标经过li的事件和编写淡入淡出函数的时候飞开编写进去 ，这样思路就会顺畅一点

*/

/p>

"http://www.w3.org/TR/html4/loose.dtd">

*{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;}//鼠标经过li的时候，调用的样式

window.οnlοad= function ds() {

var im = document.getElementById("box").getElementsByTagName("img");

var list= document.getElementById("list").getElementsByTagName("li");

var timer;

var timers;//这里一共须要两个定时器，一个是针对自己主动切换图片的，一个是针对实现淡入淡出效果的

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="";//这里必须是数组

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赋值给list【i】，以此来获得index；(感觉这样解释不太对，还望给意见)

list[i].onmouseover = function () {

inew = this.index; //获取鼠标经过时候的index

move();

// this.className = "active";//也能够在这里调用样式

}

}

timer=setInterval(function(){

inew++;

if(inew>=list.length){

inew=0;

}

move();

}

,2000);

}