图片文字加载中...
数量正在计算中...
数组应用及实例应用
数组应用及实例应用
数组
1、数组定义：
var arr = [ ‘这是一句话’, ‘这是第二句话’, ‘这是第三句话’ ] ;
2、获取数组长度：
arr.length
3、获取数组里某个位置的元素：
arr[2] //数组里第三个元素
4、往数组最后位置里添加数据：
arr.push ( ’ 我是最后一位 ‘ ) ;
设置不透明度
filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
**Opacity：**透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。
Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY：代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。
例子：a:hover { opacity: 1; filter: alpha(opacity=100); }
两种写法，opacity的取值范围不同，通过filter，一些浏览器为了提升性能会提供硬件加速。
图片切换及函数合并
效果图：
第一步：先构建好框架和样式
框架：
<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" src="">
div>要想将span和p元素分别在div中顶部和底部显示，需要
top: 0;
bottom: 0
//值可以是负数
设置文字颜色：
color: #fff;
样式：
第二步：
运用函数：
显示当前图片在数组中的位置
function fnTab() {
oSpan.innerHTML = num + 1 + '/' + arrText.length;
oImg.src = arrUrl[num];
oText.innerHTML = arrText[num];
}
fnTab(); //在之后每一次用到时，都要写一遍
<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 = ['1.jpg','2.jpg','3.jpg','4.jpg'];
var arrText = ['这是第一张', '这是第二张','这是第三张','这是第四张'];
var num = 0;
//初始化
function fnTab() {
oSpan.innerHTML = num + 1 + '/' + arrText.length;
oImg.src = arrUrl[num];
oText.innerHTML = arrText[num];
}
fnTab();
oPrev.onclick = function (){
num--;
if( num === -1){
num = arrUrl.length-1;
}
fnTab();
};
oNext.onclick = function (){
num++;
if( num === arrText.length){
num = 0;
}
fnTab();
};
}
</script>运用知识点，制作图片切换扩展
实现“循环变换”和顺序变换“两种不同的图片切换
要使两个按钮放在网页中间的位置，只需要
body{
text-align:center;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
text-align:center;
}
#content{ width:400px; height:400px;border:solid 10px #f46d72;
margin: 40px auto 0; position:relative;
background: #e8198b;}
#content a{
width:40px;height: 40px;
background: #0eb4dd;
border: solid 5px #000000;
position: absolute;
top:175px;
text-align: center;
text-decoration: line-height;
color:#b224ef;
font-size: 30px;
font-weight: bold;
filter:alpha(opacity:40);
opacity:0.4;
}
#content a:hover{
filter:alpha(opacity:90);
opacity:0.9;
}
#span2{
position: absolute;
width: 400px;
height: 30px;
line-height: 30px;
text-align: center;
top: -45px;
}
#prev{ left:10px;}
#next{ right:10px;}
#text,#span1{
position: absolute;
left:0;
width:400px;
height:30px;
line-height:30px;
text-align: center;
background: #000;
color:#fff;
filter:alpha(opacity:60);
opacity:0.6;
}
#text{
bottom:0; /*放在底部*/
margin: 0;
}
#span1{
top: 0; /*放在顶部*/
}
#img1{ width:400px; height: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 oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var arrUrl = ['1.jpg','2.jpg','3.jpg','4.jpg'];
var arrText = ['这是第一张', '这是第二张','这是第三张','这是第四张'];
var num = 0;
var onOff = true;
oBtn1.onclick = function () { //循环
onOff = true;
document.getElementById('span2').innerHTML = '图片可从最后一张跳转到第一张循环切换';
};
oBtn2.onclick = function () { //顺序
onOff = false;
document.getElementById('span2').innerHTML = '图片只能到最后一张或只能到第一张切换';
};
//初始化
function fnTab() {
oSpan.innerHTML = num + 1 + '/' + arrText.length;
oImg.src = arrUrl[num];
oText.innerHTML = arrText[num];
}
fnTab();
oPrev.onclick = function (){
num--;
if( num === -1){
if( onOff ){
num = arrUrl.length-1;
}
else{
alert('这是最前面的一张图片了哦！');
num = 0;
}
}
fnTab();
};
oNext.onclick = function (){
num++;
if( num === arrText.length){
if( onOff ){
num = 0;
}
else{
alert('这是最后的一张图片了哦！');
num = arrUrl.length - 1;
}
}
fnTab();
};
}
script>
head>
<body>
<input id="btn1" type="button" value="循环">
<input id="btn2" type="button" value="顺序">
<div id="content">
<span id="span2">图片可从最后一张跳转到第一张循环切换span>
<a id="prev" href="javascript:">a>
<a id="next" href="javascript:">a>
<p id="text">图片文字加载中...p>
<span id="span1">数量正在计算中...span>
<img id="img1" src="">
div>
body>
html>alue=“顺序”>