Js基礎--陣列應用例項（圖片切換）

阿新 • • 發佈：2019-01-13

在前面的文章中，我們講到了js中陣列的具體操作，詳見（Js對Array的各種操作總結），這裡就不再做詳細的講解。今天主要的目的是如何用陣列進行圖片的簡單左右切換。

本文中的圖片切換具體步驟如下：

第1步：簡單的佈局並設計基本的顯示樣式；

第2步：通過js獲取相關元素；

第3步：通過陣列進行圖片url和對應文字描述的儲存；

第4步：初始化：包括圖片的初始化，顯示圖片數字以及對應文字的初始化等；

第5步：點選按鈕切換圖片，編寫對應的函式，其實就是陣列的簡單應用。

接下來先看看效果圖，然後進行對應的程式碼講解。

實現程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片切換</title>
    <style>
        .box{
            width: 600px;
            height:400px;
            border: 10px solid #ccc;
            position: relative;
            margin: 40px auto 0;
        }
        .box a{
            width: 30px;
            height: 30px;
            background-color: #000;
            border: 5px solid #fff;
            position: absolute;
            top:180px;
            text-align: center;
            font-size:25px;
            font-weight: bold;
            line-height: 30px;
            color:#fff;
            text-decoration: none;
            filter: alpha(opacity:40);
            opacity: 0.4;
        }
        .box a:hover{
            filter:alpha(opacity:80);
            opacity:0.8;
        }
        .box #prev{
            left: 10px;
        }
        .box #next{
            right: 10px;
        }
        #text,#num{
            height: 30px;
            line-height:30px;
            width: 600px;
            color:#fff;
            position: absolute;
            left: 0;
            background-color: #000;
            text-align: center;
            filter: alpha(opacity:80);
            opacity: 0.8;
            margin:0;
        }
        .box #text{
            bottom: 0;
        }
        .box #num{
            top:0;
        }
        .box #img1{
            width: 600px;
            height: 400px;
        }
    </style>
    <script>
        window.onload = function () {
            var oPrev = document.getElementById("prev");
            var oNext = document.getElementById("next");
            var oText = document.getElementById("text");
            var oNum = document.getElementById("num");
            var oImg = document.getElementById("img1");

            var arrUrl = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
            var arrText = ['文字1','文字2','文字3','文字4'];

            //初始化
            var num = 0;
            function fnTab(){
                oNum.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 == arrUrl.length){
                    num = 0;
                }
                fnTab();
            };
        };
    </script>
</head>
<body>
    <div class="box">
        <a id="prev" href="javascript:;"> < </a>
        <a id="next" href="javascript:;"> > </a>
        <p id="text">圖片正在載入中……</p>
        <span id="num">數量正在統計中……</span>
        <img id="img1" src="../images/1.jpg" alt="">
    </div>
</body>
</html>

這個例子很簡單，主要就是對陣列的簡單讀寫以及對html的屬性內容讀寫操作。其中需要注意的是，當我們點選下一張到最後一張圖片或者點選上一張到第一張時，需要設定具體的數值變化，不=否則會越界，那麼圖片、數字和對應的問題就沒有內容。

另外做了一個可以順序播放和迴圈播放圖片的例子。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片切換</title>
    <style>
        body,p{
            margin:0px;
            padding:0px;
        }
        input{
            outline: none;
            border:none;
            padding: 0;
        }
        .box{
            width:320px;
            height:320px;
            position: relative;
            margin:50px auto;
        }
        #img_list{
            width:320px;
            height:200px;
        }
        #btns{
            text-align: center;
        }
        #btn1,#btn2,#pre,#next{
            background-color: #727272;
            color: #fff;
            width:70px;
            height:22px;
            line-height:22px;
            border-radius:4px;
            text-align: center;
            margin:auto auto;
            font-size: 12px;
        }
        #btn1:hover,#btn2:hover{
            background-color: #aeaeae;
            color: #feffa8;
        }
        #btns #title,#num{
            width:320px;
            height: 30px;
            line-height:30px;
            font-size: 16px;
            display: block;
        }
        #content{
            width:320px;
            text-align: center;
        }
        #content #con_title{
            width: 320px;
            height: 30px;
            line-height:30px;
            text-align: center;
            background-color: #000;
            filter: alpha(opacity:40);
            opacity: 0.4;
            position: absolute;
            top:223px;
            color: #fff;
        }
        #changeBtn{
            width: 320px;
            text-align: center;
        }
    </style>
    <script>
        window.onload= function () {
            var oBtn1 = document.getElementById("btn1");
            var oBtn2 = document.getElementById("btn2");
            var oTitle = document.getElementById("title");
            var oImg = document.getElementById("img_list");
            var oCon_title = document.getElementById("con_title");
            var oNum = document.getElementById("num");
            var oPre = document.getElementById("pre");
            var oNext= document.getElementById("next");

            var imgList = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
            var titleList=['這是第一張圖片','這是第二張圖片','這是第三張圖片','這是第四張圖片','這是第五張圖片'];

            oNum.innerHTML=1+'/'+imgList.length;
            oCon_title.innerHTML="這是第一張圖片";
            var num = 0;
            var onoff = true;//true  順序播放   false  迴圈播放

            oBtn1.onclick= function () {
                onoff=true;
                oTitle.innerHTML="圖片順序播放";
            };
            oBtn2.onclick= function () {
                onoff=false;
                oTitle.innerHTML="圖片迴圈播放";
            };
            oPre.onclick= function () {
                num--;
                if(num<0){
                    if(onoff){//true  順序播放
                        num=0;
                        alert("已經是第一張啦！");
                    }else{
                        num=imgList.length-1;
                    }
                }
                changeImg(num)
            };
            oNext.onclick= function () {
                num++;
                if(num>imgList.length-1){
                    if(onoff){//true  順序播放
                        num=imgList.length-1;
                        alert("已經是最後一張啦！");
                    }else{
                        num = 0;
                    }
                }
                changeImg(num);

            };
            function changeImg(num){
                oImg.src= imgList[num];
                oCon_title.innerHTML=titleList[num];
                oNum.innerHTML=num+1+'/'+imgList.length;
            };
        };
    </script>
</head>
<body>
<div class="box">
    <div id="btns">
        <input id="btn1" type="button" value="順序播放"/>
        <input id="btn2" type="button" value="迴圈播放"/>
        <p id="title">圖片順序播放</p>
    </div>
    <div id="content">
        <img id="img_list" src="images/1.jpg" alt="">
        <p id="con_title"></p>
        <span id="num"></span>
    </div>
    <div id="changeBtn">
        <input id="pre" type="button" value="上一張">
        <input id="next" type="button" value="下一張">
    </div>
</div>
</body>
</html>

Js基礎--陣列應用例項（圖片切換）

在前面的文章中，我們講到了js中陣列的具體操作，詳見（Js對Array的各種操作總結），這裡就不再做詳細的講解。今天主要的目的是如何用陣列進行圖片的簡單左右切換。本文中的圖片切換具體步驟如下：第1步：簡單的佈局並設計基本的

JS基礎——陣列綜合練習（輸入班級人數及成績，求總成績、平均成績、最高分、最低分）

原始碼： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co

機器學習應用例項（照片OCR）(斯坦福machine learning week 11)

NG說：我想介紹這部分內容的原因主要有以下三個: 第一，我想向你展示一個複雜的機器學習系統是如何被組合起來的。第二，我想介紹一下機器學習流水線（machine learning

JS對陣列的處理（包含ES6）

JS有很多處理陣列的方法，這些方法都是Array內建物件的方法。該文章是對這些方法的用途的總結，方便翻閱，並不提供具體使用示例。眾所周知，陣列是引用型別，所以我把這些方法分為兩類，一類是直接對原陣列操作，會改變原陣列的方法，另一類是返回一個副本，對這個副本的操作不會改變原陣列

js基礎--陣列（3）

1.陣列型別我們到處都可以看見陣列是具有特殊行為的物件。給定一個未知的物件，判定它是否為陣列通常非常有用。在ECMAScript 5中，可以使用Array.isArray()函式來做這件事情： Array.isArray([])//=＞true Array.isArray({})//=＞f

js基礎--陣列（2）

1.建立陣列使用陣列直接量是建立陣列最簡單的方法，在方括號中將陣列元素用逗號隔開即可。例如： var empty=[];//沒有元素的陣列 var primes=[2,3,5,7,11];//有5個數值的陣列 var misc=[1.1,true,"a",];//3個不同型別的元素和結尾的逗

【JavaScript】（8）——例項：圖片切換效果

背景：不知道怎麼回事，最近做的專案都是在和UI打交道，各種圖片，各種表格，各種按鈕的組合、拼接；寫各種JS方法讓他們無縫組合，自由切換；對CSS+HTML中的多種屬性都熟悉了一下，盒子模型，背景圖片

Andrew NG 機器學習筆記-week11-應用例項：圖片文字識別（Application Example：Photo OCR）

1、問題描述和流程圖（Problem Description and Pipeline） photo OCR：photo Optical Character Recognition 影象文字識別，要求從一張給定的圖片中識別文字。為了完成這樣的工作，需

js基礎知識第二天（邏輯運算符）

tex 2個 cnblogs text 黑白 javascrip 簡單 data- log 今天學習了2個知識點，數據類型轉換，邏輯運算符。這個2個知識點比較簡單，會用就可以。邏輯運算符邏輯運算只有2個幾個，一個為true，一個為false 且&&

js上傳文件（圖片）限制格式及大小為3M

max element 不能 jpg script 圖片大小 -s 打開 -1 本文保存為.html文件用瀏覽器打開即可測試功能 <form id="form1" name="form1" method="post" action="" enctype="m

JS基礎之傳參（值傳遞、對象傳遞）

rate ati 無效 over 並不是 undefined 字符 https cal 一、概念　　我們需了解什麽是按值傳遞(call by value)，什麽是按引用傳遞(call by reference)。在計算機科學裏，這個部分叫求值策略(Evaluation

第三章棧作業題2-棧及其應用-計算機17級 6-1 爆記憶體函式例項（6 分）

6-1 爆記憶體函式例項（6 分）本題要求實現一個遞迴函式，使用者傳入非負整型引數n，使用者依次輸出1到n之間的整數。所謂遞迴函式就是指自己呼叫自己的函式。說明：（1）遞迴函式求解問題的基本思想是把一個大規模問題的求解歸結為一個相對較小規模問題的求解，小規模

Java基礎之反射例項（例項化Account與修改屬性）

要求：設計Account類，並且新增屬性id、name、balance，新增get和set方法與存取錢的方法。設計ReflectAccountTest類，例項化Account物件，存如100元，與取1000元的結果顯示。 &nb

js事件高階應用01（事件繫結、高階拖拽）

事件繫結 IE方式 attachEvent(事件名稱、函式)，繫結事件處理函式 detachEvent(事件名稱、函式)，解除繫結 DOM方式 add

JS克隆陣列和物件（不指向同一記憶體）

專案中有時候需要把原始資料存起來，便於其他資料修改它之後再和它對比。平常程式碼要克隆就直接複製了。像這樣： const a = {a:'a',b:'b'}; const b = a; 此時去改變b的話，a中的資料也會隨著改變，這樣違背了我們的初衷。怎麼解決呢？直接使用ES

leetcode刷題--基礎陣列--旋轉影象（C）

給定一個 n × n 的二維矩陣表示一個影象，將影象順時針旋轉 90 度。說明：你必須在原地旋轉影象，這意味著你需要直接修改輸入的二維矩陣。請不要使用另一個矩陣來旋轉影象。示例 1: 給定 matrix = [ [ 5, 1, 9,11], [ 2, 4,

leetcode刷題--基礎陣列--移動零（C）

給定一個數組 nums，編寫一個函式將所有 0 移動到陣列的末尾，同時保持非零元素的相對順序。示例: 輸入: [0,1,0,3,12] 輸出: [1,3,12,0,0] 說明: 必須在原陣列上操作，不能拷貝額外的陣列。儘量減少操作次數。思想：這個和之前

js實現簡單小例項（奔跑的小豬）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>window物件</title> <style>

js基礎--陣列方法

join() Array.join()方法將陣列中所有元素都轉化為字串並連線在一起，返回最後生成的字串。可以指定一個可選的字串在生成的字串中來分隔陣列的各個元素。如果不指定分隔符，預設使用逗號。如以下程式碼所示： var a=[1,2,3];//建立一個包含三個元素的陣列 a.

類載入器、反射，反射的應用例項（泛型擦除和配置檔案）

類載入器 1.1類的載入當程式要使用某個類時，如果該類還未被載入到記憶體中，則系統會通過載入，連線，初始化三步來實現對這個類進行初始化。 1.1.1載入指將class檔案讀入記憶體，併為之建立一個Class物件。任何類被使用時系統都會建立一個Class物件（位元組碼檔案物件，建

Js基礎--陣列應用例項（圖片切換）

相關推薦