<!DOCTYPE html>
<html><meta charset="utf-8"><head> <title></title> <style type="text/css"> ul{ padding: 0; margin: 0; } li{ list-style: none; } p { margin:0; } body { text-align:center; } #pic{ width: 400px; height: 400px; border: 10px solid #ccc; margin:50px auto 0; position:relative; } a{ width:40px; height:40px; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:20px; font-weight: bolder; color:#FFFFFF; text-align:center; line-height:40px; text-decoration:none; border-radius: 50%; background: #EFBD00; } #prev{ left: 10px; } #next{ right: 10px; } a:hover{ filter:alpha(opacity:30); opacity:0.3; } #pic p ,#pic strong{ width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; left:0; } #pic p{ bottom:0; } #pic strong{ top:0;}
#pic img{ width: 400px; height: 400px; } #pic .active { background:#EFBD00; } #pic ul{ position: absolute; bottom: -40px; right:160px;}
#pic li{ width: 10px; height: 10px; margin-bottom: 4px; background: #94A59C; margin-left: 20px; float: left; border-radius: 50%; cursor: pointer; position: relative; } #pic li .mini { position: absolute; width: 39px; height: 48px; bottom: 25px; border: 2px solid #c2ead7; left: -12px; } </style> <script type="text/javascript"> window.οnlοad=function(){ var oDiv=document.getElementById("pic"); var oImg = oDiv.getElementsByTagName('img')[0]; var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var oPrev=document.getElementById("prev"); var oNext=document.getElementById("next"); var oP=document.getElementById("p1"); var oStrong=document.getElementById("strong1"); var arrUrl=['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg' ]; var arrText=['文字一', '文字二', '文字三', '文字四']; var num=0; for(var i=0;i<arrUrl.length;i++){ oUl.innerHTML+='<li></li>'; //根据图片的多少创建多少个<li> 标签 } //创建了一个函数，因为多次被调用相同的代码，所以用函数将代码存在一起，减少代码冗余 function fnTab(){ oStrong.innerHTML=num+1+'/'+arrText.length; oP.innerHTML=arrText[num]; oImg.src=arrUrl[num]; for(var i=0;i<aLi.length;i++){ //所先将所有的li标签的样式全部清空，当前添加 aLi[i].className=''; } aLi[num].className = 'active'; } fnTab();//调用函数进行初始化 oPrev.οnclick=function(){ num --; if( num == -1 ){ num = arrText.length-1; } fnTab(); }; oNext.οnclick=function(){ num ++; if( num == arrText.length){ num = 0; } fnTab(); }; for( var i=0; i<aLi.length; i++ ){ aLi[i].index = i; // 索引值：让每一li的值与i的值对应相等；如果直接使用 i那么里面的匿名函数的i将会一直等于3； aLi[i].onclick = function (){ num=this.index; //alert(i) i=3; fnTab(); } aLi[i].onmouseover = function (){ aLi[this.index].innerHTML = '<img class="mini" src="' + arrUrl[this.index] + '" />'; } aLi[i].οnmοuseοut=function(){ aLi[this.index].innerHTML = ''; } }/*setInterval（）是指间歇调用，他接受两个参数，要执行的代码（字符串或者函数）和每次需要执行之前需要等待的毫秒数 1秒等于1000毫秒clearInterval( )是用来取消尚未执行的间歇调用;*/ var timer; function time(){ clearInterval(timer); timer=setInterval(function() { num++; if (num==aLi.length) { num=0; }; fnTab(); },3000); } time();
}
</script>
</head><body><div id="pic"> <a id="prev" href="javascript:;"> < </a> <a id="next" href="javascript:;"> > </a> <p id="p1">图片文字加载中……</p> <strong id="strong1">图片数量计算中……</strong> <img id="img1" /> <ul> </ul></div></body>
</html>