数组应用及实例应用

数组应用及实例应用
数组

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,一些浏览器为了提升性能会提供硬件加速。

图片切换及函数合并

效果图:
数组应用及实例应用_第1张图片
第一步:先构建好框架和样式

框架:

<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=“顺序”>

图片可从最后一张跳转到第一张循环切换

图片文字加载中...

数量正在计算中...
```

你可能感兴趣的:(js学习,javascript)