应用自定义属性、索引值实现带略缩图的图片轮播
<!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.onload=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.onclick=function(){
num --;
if( num == -1 ){
num = arrText.length-1;
}
fnTab();
};
oNext.onclick=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].onmouseout=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>
