<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html屬性操作</title>
<style>
*{ margin:0; padding:0}
#content{ width:400px; height:400px; border:10px solid #ccc; margin:40px auto; position:relative; background:#f1f1f1}
#content a{ width:40px; height:40px; background:#000; border:5px solid #fff; position:absolute; top:175px; text-align:center; line-height:40px; color:#fff; opacity:1; text-decoration:none}
#content a:hover{opacity:0.8}
#prev{ left:10px;}
#next{right:10px}
#text,#span1{ position:absolute; left:0; width:400px; border:0; height:30px; line-height:30px; background:#000; text-align:center; color:#fff;opacity:0.8}
#text{bottom:0;}
#span1{top:0;}
#img1{width:400px; height:400px;}
</style>
<script>
window.onload = function(){
var oText = document.getElementById('text');
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oSpan = document.getElementById('span1');
var oImg = document.getElementById('img1');
var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
var arrText = ['標題1','標題2','標題3','標題4'];
var num = 0;
//初始化
function fnTab(){
oSpan.innerHTML = num+1+'/'+arrText.length;
oImg.src=arrUrl[num];
oText.innerHTML=arrText[num];
}
fnTab();
oNext.onclick = function(){
num++;
if(num==arrText.length){
num=0;
}
fnTab();
}
oPrev.onclick = function(){
num--;
if(num==-1){
num=arrText.length-1;
}
fnTab();
}
}
</script>
</head>
<body>
<div id="content">
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<p id="text">文字正在加載中</p>
<span id="span1">數量正在計算中</span>
<img id="img1"/>
</div>
</body>
</html>
圖片左右切換
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章