Js基础--数组应用实例（图片切换）

最新推荐文章于 2021-06-05 00:51:49 发布
最新推荐文章于 2021-06-05 00:51:49 发布
阅读量6.6k 收藏 15
点赞数 6
分类专栏： JavaScript 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010297791/article/details/53393349
版权

       在前面的文章中，我们讲到了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.οnlοad= 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.οnclick= function () {
                onoff=true;
                oTitle.innerHTML="图片顺序播放";
            };
            oBtn2.οnclick= function () {
                onoff=false;
                oTitle.innerHTML="图片循环播放";
            };
            oPre.οnclick= function () {
                num--;
                if(num<0){
                    if(onoff){//true  顺序播放
                        num=0;
                        alert("已经是第一张啦！");
                    }else{
                        num=imgList.length-1;
                    }
                }
                changeImg(num)
            };
            oNext.οnclick= 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>


Wendy-lxq
关注
  • 6
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript 图像数组
six6de6的博客
11-16 2683
JavaScript 图像数组
js实现图片数组中的图片切换
蓝胖子的博客
09-19 3781
写一个图片切换的小案例，巩固一下setAttribute的用法。setAttribute()方法能够给dom元素添加属性并指定属性值，如果属性已经存在则更改属性值。 方法：将图片放入数组中首先给img一个初始值，使用index存放当前被点击图片的下标，当再一次点击时，下标+1赋值给数组下标，利用setAttribute()方法给img标签设置src属性。上一张效果反之，代码如下。 <!DOCTYPE html> <html> <head> <meta char
在线放大缩小左右旋转的图片特效
06-11
模仿新浪微博上的图片特效，实现图片在想放大缩小，支持上下左右的图片翻转效果，效果很不错
html点击图片弹出放大缩小并左右切换,基于jquery实现一张图片点击鼠标放大再点缩小...
weixin_39552179的博客
06-05 490
复制代码 代码如下:var isopen = false;var newImg;var w = 200; //将图片宽度+200var h = 200; // 将图片高度 +200$(document).ready(function(){$("img").bind("click", function(){newImg = this;if (!isopen){isopen = true;$(this...
java源码包---java 源码 大量 实例
04-18
　Java波浪文字，一个利用Java处理字符的实例，可以设置运动方向参数，显示文本的字符数组，高速文本颜色，显示字体的 FontMetrics对象，得到Graphics实例，得到Image实例，填充颜色数组数据，初始化颜色数组。...
js设置随机切换背景图片的简单实例
10-19
这个实例展示了如何使用JavaScript实现这一功能。首先，我们需要准备多张图片的URL，并将它们存储在一个数组中。在这个例子中，`imgs`数组包含了9个不同的图片链接。 ```javascript var imgs = [ ...
js实现图片淡入淡出切换简易效果
10-21
在JavaScript编程中，实现图片淡入淡出切换的效果是一种常见的动态效果，用于增强用户体验。...同时，这个实例也可以作为基础，进一步扩展为更复杂的图片切换功能，例如添加自动轮播、添加过渡效果等。
JS简单的轮播的图片滚动实例
10-27
总的来说，这个实例提供了一个基础的JavaScript轮播图片功能，包括图片的自动切换、鼠标悬停暂停以及自定义的滚动方向。开发者可以根据自己的需求扩展此代码，例如添加左右箭头控制、指示器、无限循环等更复杂的功能...
js实现网页随机切换背景图片的方法
12-11
本文实例讲述了js实现网页随机切换背景图片的方法。分享给大家供大家参考。具体实现方法如下： 首先要准备一些图像，图像的大小（无论是尺寸大小还是数据大小）要控制好，如果太大，会使用户等不及查看全图就跳出了...
图片至数组转化
12-29
实现图片至数组转化功能的vi 主要完成图形数字化的转化
图解数据结构(01) -- 数组
姜皓的博客
12-26 1524
数组 1、什么是数组 数组对应的英文是 array，是有限个相同类型的变量所组成的有序集合，数组中 的每一个变量被称为元素。数组是最为简单、最为常用的数据结构；以整型数组为例，数组的存储形式如下图所示： 数组中的每一个元素有着自己的下标，只不过这个下标从0开始，一直到数组长度-1；数组的另一个特点，是在内存中顺序存储，因此可以很好地实现逻辑上的顺序表。 数组在内存中的顺序存储：内存是由一个个连续...
js中将byte数组转换成base64图片显示
热门推荐
web_cgh的博客
06-08 2万+
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;  &lt;meta charset="UTF-8"&gt;  &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;script&gt;    va
html怎么把图片放到数组,HTML5中的图像数组
weixin_30955739的博客
06-04 1863
所以，如果我想在网上抓取几张图片，将它们放入一个数组中并在网站上使用它们，我正在使用Javascript怎么做。HTML5中的图像数组var images = [{caption: "Red Slate Mountain", alt: "Mountain", url:"https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Red_Sla...
把图片放在对象数组里传给后台
Gala_L的博客
11-21 1609
    var parkBusiess = new Object();     for (var i = 0;i &lt; $(".layui-upload-img").length;i ++) {         var layuiUploadImgtext = $(".layui-upload-img").eq(i).attr('src');         var parkNameI =...
js基础【用数组 点击按钮切换图片】
姗姗的博客
07-06 1416
<body> <img src="img/dm.jpeg" alt="" id="pic"><br> <input type="button" value="下一张" id="btn"> <p id="txt">显示的是img/1.jpg</p> <script> var ary = ['img/dm.j...
resttemplate x-www-form-urlencoded body 数组
最新发布
09-26
在使用RestTemplate发送x-www-form-urlencoded格式的POST请求时，可以使用MultiValueMap来构建请求体，支持传递数组参数。以下是示例代码： ```java // 导入所需的依赖 import org.springframework.http.HttpHeaders; import org.springframework.http.HttpMethod; import org.springframework.http.MediaType; import org.springframework.http.ResponseEntity; import org.springframework.util.LinkedMultiValueMap; import org.springframework.util.MultiValueMap; import org.springframework.web.client.RequestCallback; import org.springframework.web.client.RestTemplate; // 创建RestTemplate实例 RestTemplate restTemplate = new RestTemplate(); // 设置请求头信息 HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED); // 构建请求体参数 MultiValueMap<String, Object> body = new LinkedMultiValueMap<>(); body.add("param1", "value1"); body.add("param2", "value2"); body.add("param3", new String[]{"value3", "value4"}); // 数组参数 // 设置请求回调 RequestCallback requestCallback = restTemplate.httpEntityCallback(body, headers, HttpMethod.POST); // 发送POST请求 ResponseEntity<String> response = restTemplate.execute("http://example.com/api", HttpMethod.POST, requestCallback, null); // 获取响应结果 String responseBody = response.getBody(); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值