<!DOCTYPE html><html><meta charset="utf-8"><head> <title></title> <style type="text/css"> ul{ padding: 0; margin: 0; } li{ list-style: none; } p { mar ...
<!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>
