<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<style type="text/css">
body,div,ul,li,a,img{margin: 0;padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;}
.wrapper{position: relative;margin: 30px auto;width: 400px;height: 400px;}
.banner{width: 400px;height: 400px;overflow: hidden;}
.imgList{width:400px;height:400px;z-index: 10;}
.imgList li{display: none;}
.imgList .imgOn{display: inline;}
.bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
.infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
.infoList li{display: none;}
.infoList .infoOn{display: inline;color: white;}
.indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
.indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
.indexList .indexOn{background: red;font-weight: bold;color: white;}
</style>
</head>
<body>
<div class="wrapper">
<div class="banner">
<ul class="imgList">
<li class="imgOn"><a href="#"><img src="./img/pic1.jpg" width="400px" height="400px" ></a></li>
<li><a href="#"><img src="./img/pic2.jpg" width="400px" height="400px" ></a></li>
<li><a href="#"><img src="./img/pic3.jpg" width="400px" height="400px" ></a></li>
</ul>
<div class="bg"></div>
<ul class="infoList">
<li class="infoOn"></li>
<li></li>
<li></li>
</ul>
<ul class="indexList">
<li class="indexOn">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<script type="text/javascript">
var curIndex = 0,
imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"),
imgLen = imgArr.length,
infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"),
indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li");
var autoChange = setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex = 0;
}
changeTo(curIndex);
},2500);
addEvent();
function addEvent(){
for(var i=0;i<imgLen;i++){
(function(_i){
indexArr[_i].onmouseover = function(){
clearTimeout(autoChange);
changeTo(_i);
curIndex = _i;
};
indexArr[_i].onmouseout = function(){
autoChange = setInterval(function(){
if(curIndex < imgLen -1){
curIndex ++;
}else{
curIndex = 0;
}
changeTo(curIndex);
},2500);
};
})(i);
}
}
function changeTo(num){
var curImg = getElementsByClassName("imgOn")[0];
fadeOut(curImg);
removeClass(curImg,"imgOn");
addClass(imgArr[num],"imgOn");
fadeIn(imgArr[num]);
var curInfo = getElementsByClassName("infoOn")[0];
removeClass(curInfo,"infoOn");
addClass(infoArr[num],"infoOn");
var _curIndex = getElementsByClassName("indexOn")[0];
removeClass(_curIndex,"indexOn");
addClass(indexArr[num],"indexOn");
}
function setOpacity(elem,level){
if(elem.filters){
elem.style.filter = "alpha(opacity="+level+")";
}else{
elem.style.opacity = level / 100;
}
}
function fadeIn(elem){
setOpacity(elem,0);
for(var i = 0;i<=20;i++){
(function(){
var level = i * 5;
setTimeout(function(){
setOpacity(elem, level)
},i*25);
})(i);
}
}
function fadeOut(elem){
for(var i = 0;i<=20;i++){
(function(){
var level = 100 - i * 5;
setTimeout(function(){
setOpacity(elem, level)
},i*25);
})(i);
}
}
function getElementsByClassName(className){
var classArr = [];
var tags = document.getElementsByTagName('*');
for(var item in tags){
if(tags[item].nodeType == 1){
if(tags[item].getAttribute('class') == className){
classArr.push(tags[item]);
}
}
}
return classArr;
}
function hasClass(obj,cls){
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj,cls){
if(!this.hasClass(obj,cls)){
obj.className += cls;
}
}
function removeClass(obj,cls){
if(hasClass(obj,cls)){
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg,'');
}
}
</script>
</body>
</html>
新建文件夹.zip （30个子文件） 
7.docx 318KB 3.docx 192KB 8.docx 195KB 5.docx 47KB
6.html 2KB 2.docx 216KB 1.docx 172KB 5.html 882B 1-2.html 1KB 8.html 5KB 9-2.html 3KB 1-1.html 1KB 7.html 5KB 10.html 1KB 4.html 518B 4.docx 104KB 6.docx 124KB
img 
pic2.jpg 11KB
background.png 549KB pic3.jpg 31KB head.png 131KB pic1.jpg 40KB footer.png 28KB 10.docx 93KB 11.html 4KB 9-1.html 3KB 11.docx 1.33MB 12.docx 35KB 9.docx 820KB 12.html 1KB资源评论
