/*
思路总结：
1.实现图片滚动的function、鼠标经时候获取当前li的index、设置ndex自己主动递增的函数、实现淡入淡出效果的函数
2.整个实现效果一传递index为主线
3.我的编写代码过程
---->a.先编写好实现图片切换的函数，这里主要是包括for历遍所以图片并设置display为none和传递index（这里把index赋值给inew）；
---->b.编写鼠标经过时候获取index，这里必须通过历遍和赋值把鼠标经过的index赋值个inew，并传递给能够实现图片切换的函数move（）；
---->c. 编写实现图片淡入淡出的效果函数
---->d.move（）函数的功能实现能够在编写鼠标经过li的事件和编写淡入淡出函数的时候飞开编写进去 ，这样思路就会顺畅一点
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
*{margin:0;padding:0;}
#wrap{500px;height:375px;overflow:hidden;margin:0 auto;
position:relative;;
}
#list{
position:absolute;
bottom:10px;
right:10px;
}
ul{
list-style: none;
}
li{float:left;20px;height:20px;margin:1px 1px;
border:1px #333333 dashed;text-align: center;line-height:
20px;background-color:aquamarine;}
.active{background-color:royalblue;}//鼠标经过li的时候，调用的样式
</style>
<script>
window.onload= 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);
}
</script>
</head>
<body>
<div id="wrap">
<div id="box">
<img src="images/00031.jpg">
<img src="images/00032.jpg">
<img src="images/00033.jpg">
<img src="images/00034.jpg">
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
