js的判斷以及圖片的點選切換效果
阿新 • • 發佈：2019-01-28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的簡單練習</title>
<style>
h1{ height:30px; width:400px; border:2px solid pink; font-size:20px; text-align:center; text-align:center; margin:40px auto 20px;}
#content{ height:400px; width:400px; background:#ccc; border:10px solid pink; margin:0 auto; position:relative;}
#content a{ height:40px; width:40px; background:#000; border:5px solid #fff; color:#fff; font-size:30px; text- align:center; text-decoration:none; line-height:40px; color:#fff; position:absolute; top:175px; opacity:0.4;}
#content a:hover{ opacity:0.9;}
#prev{ left:10px;}
#next{ right:10px;}
#text,#span1{ height:30px; width:400px; background:yellow;
font-size:18px; text-align:center; line-height:30px;
position:absolute; left:0; margin:0;}
#text{ top:0;}
#span1{ bottom:0;}
#img1{ height:400px; width:400px;}
</style>
<script>
window.onload = function(){
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oText = document.getElementById('text');
var oSpan = document.getElementById('span1');
var oImg = document.getElementById('img1');
var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
var arrText = ['眺望遠方','在海邊','愛心世界','美麗花環'];
var num = 0;
//初始化
function fnTab(){
oText.innerHTML = num+1+'/'+arrUrl.length;
oImg.src = arrUrl[num];
oSpan.innerHTML = arrText[num];
}
fnTab();
oPrev.onclick = function(){
num--;
if(num==-1){
num = arrUrl.length-1;
}
fnTab();
}
oNext.onclick = function(){
num++;
if(num==arrUrl.length){
num = 0;
}
fnTab();
}
}
</script>
</head>
<body>
<h1>js的圖片切換效果</h1>
<div id="content">
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
<p id="text">圖片的數量正在計算...</p>
<span id="span1">圖片的文字正在載入...</span>
<img id="img1" alt="" />
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>js的簡單練習</title>
<style>
h1{ height:30px; width:400px; border:2px solid pink; font-size:20px; text-align:center; text-align:center; margin:40px auto 20px;}
#content{ height:400px; width:400px; background:#ccc; border:10px solid pink; margin:0 auto; position:relative;}
#content a{ height:40px; width:40px; background:#000; border:5px solid #fff; color:#fff; font-size:30px; text- align:center; text-decoration:none; line-height:40px; color:#fff; position:absolute; top:175px; opacity:0.4;}
#content a:hover{ opacity:0.9;}
#prev{ left:10px;}
#next{ right:10px;}
#text,#span1{ height:30px; width:400px; background:yellow;
font-size:18px; text-align:center; line-height:30px;
position:absolute; left:0; margin:0;}
#text{ top:0;}
#span1{ bottom:0;}
#img1{ height:400px; width:400px;}
</style>
<script>
window.onload = function(){
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oText = document.getElementById('text');
var oSpan = document.getElementById('span1');
var oImg = document.getElementById('img1');
var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
var arrText = ['眺望遠方','在海邊','愛心世界','美麗花環'];
var num = 0;
//初始化
function fnTab(){
oText.innerHTML = num+1+'/'+arrUrl.length;
oImg.src = arrUrl[num];
oSpan.innerHTML = arrText[num];
}
fnTab();
oPrev.onclick = function(){
num--;
if(num==-1){
num = arrUrl.length-1;
}
fnTab();
}
oNext.onclick = function(){
num++;
if(num==arrUrl.length){
num = 0;
}
fnTab();
}
}
</script>
</head>
<body>
<h1>js的圖片切換效果</h1>
<div id="content">
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
<p id="text">圖片的數量正在計算...</p>
<span id="span1">圖片的文字正在載入...</span>
<img id="img1" alt="" />
</div>
</body>
</html>