<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,
li,
p {
padding: 0;
margin: 0;
}

ul,
li {
list-style: none;
}

#box {
width: 1000px;
height: 600px;
border: 1px solid #000;
margin: 50px auto;
text-align: center;
position: relative;
}

input {
margin-top: 30px;
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
background: #009999;
color: #fff;
outline: none;
}

ul {
width: 1000px;
height: 500px;
top: 100px;
position: absolute;
background: #fff;
}

ul li {
width: 240px;
height: 250px;
float: left;
padding: 0 5px 10px 5px;
}

ul li img {
width: 240px;
height: 200px;
vertical-align: top;
}

p {
background: #ccc;
height: 30px;
line-height: 30px;
color: #006598;
font-weight: bold;
}
</style>

</head>

<body>
<div id="box">
<input type="button" value="从大到小" />
<input type="button" value="打乱顺序" />
<ul>
<li>
<img src="img/1.jpg" alt="">
<p>1 - 言叶之庭01</p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
<li>
<img src="" alt="">
<p></p>
</li>
</ul>
</div>
<script>
var aLi = document.getElementsByTagName('li');
var aInp = document.getElementsByTagName('input');
var a = true
var json = {
'Url': ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg'],
'title': ['1 - 言叶之庭01', '2 - 言叶之庭02', '3 - 言叶之庭03', '4 - 言叶之庭04', '5 - 言叶之庭05', '6 - 言叶之庭06', '7 - 言叶之庭07', '8 - 言叶之庭08']
};
var num = [0, 1, 2, 3, 4, 5, 6, 7];

for(var i = 0; i < aLi.length; i++) {
var oImg = aLi[i].getElementsByTagName("img")[0]
var oP = aLi[i].getElementsByTagName("p")[0]
oImg.src = json.Url[num[i]]     
oP.innerHTML = json.title[num[i]]
}

aInp[0].onclick = function() {

if(a) {
num.sort(function(a, b) {
return b - a
})
for(var i = 0; i < aLi.length; i++) {
var oImg = aLi[i].getElementsByTagName("img")[0]
var oP = aLi[i].getElementsByTagName("p")[0]
oImg.src = json.Url[num[i]]   //打乱数组【Url】顺序，如:初始num[0],打乱了后，比如var num = [1, 0, 2, 3, 4, 5, 6, 7];则num【0】等于1
oP.innerHTML = json.title[num[i]]
}
aInp[0].value = "从小到大"
a = false
} else {
num.sort(function(a, b) {
return a - b
})
for(var i = 0; i < aLi.length; i++) {
var oImg = aLi[i].getElementsByTagName("img")[0]
var oP = aLi[i].getElementsByTagName("p")[0]
oImg.src = json.Url[num[i]]
oP.innerHTML = json.title[num[i]]
}
aInp[0].value = "从大到小"
a = true
}
}

aInp[1].onclick = function() {
num.sort(function(a, b) {
return Math.random() - 0.5
})
for(var i = 0; i < aLi.length; i++) {
var oImg = aLi[i].getElementsByTagName("img")[0]
var oP = aLi[i].getElementsByTagName("p")[0]
oImg.src = json.Url[num[i]]
oP.innerHTML = json.title[num[i]]
}
}
</script>
</body>

</html>

js-随机图片的更多相关文章

  1. js 随机星星 document.createElement(); setAttribute()

    js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  2. springboot搭建项目，实现Java生成随机图片验证码。

    这篇文章主要介绍了如何通过Java如何生成验证码并验证.验证码的作用我想必大家都知道,话不多说开始实施! 首先创建一个springboot项目以下是项目结构,内有utli工具类.存放生成图片验证码方法 ...

  3. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  4. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  5. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  6. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  7. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  8. 使用 FocusPoint.js 实现图片的响应式裁剪

    通常网站的布局都不是单一的.例如图像在电脑.平板和智能手机上可能显示的形状是不同的.特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬. ...

  9. Lazyr.js – 延迟加载图片（Lazy Loading）

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  10. Webview加载本地js、图片的方法

    在项目开发中经常会将比较大的js.图片.css等放到app中,而html放服务器,这样在使用时流量较少,加载也比都放服务器上快,其实方法也比较多,网上搜了很久都没结果. 一种是获取服务器返回的html ...

随机推荐

  1. [转载]RPM中SPEC常用路径以及宏变量

    转自:http://blog.csdn.net/txgc1009/article/details/6833764 通过命令rpm --showrc查看实现代码.另外直接通过 rpm --eval &q ...

  2. RecyclerView错误

    1. java.lang.NoClassDefFoundError: android.support.v7.widget.RecyclerView 这个错误真TM见鬼,明明jar包里面就有这个类,工程 ...

  3. 为什么要用jvm .

    挚享科技 2018.4.8 运行java程序字节码,实现跨平台.. Java语言使用Java虚拟机屏蔽了与具体平台相关的信息,使得Java语言编译程序只需生成 在Java虚拟机上运行的目标代码(字节码 ...

  4. hibernate 的evict 和clear

    摘自百度知道:http://zhidao.baidu.com/question/63663640.html 问: 先创建一个Student,然后调用session.save方法,然后再调用evict方 ...

  5. python学习 day19 (3月26日)----(对象组合）

    深谙:非常透彻地了解:熟悉内中情形.谙,读作‘ān’ 熟悉. 1.面向对象作用:规划了代码中的函数处理的是哪一类问题 解决了传参的问题 方便扩展 方便重用 2.类的定义和使用类当中有哪些成员 ''' ...

  6. Hadoop3集群搭建之——hive添加自定义函数UDTF

    上篇: Hadoop3集群搭建之——虚拟机安装 Hadoop3集群搭建之——安装hadoop,配置环境 Hadoop3集群搭建之——配置ntp服务 Hadoop3集群搭建之——hive安装 Hadoo ...

  7. ios label的一些设置

    一.根据文本长度设置label的宽高和字体大小 NSString *str = @"天将降大任于斯人也,必先苦其心志.天将降大任于斯人也,必先苦其心志.";      CGRect ...

  8. 2019.01.21 洛谷P3919 【模板】可持久化数组（主席树）

    传送门 题意简述:支持在某个历史版本上修改某一个位置上的值,访问某个历史版本上的某一位置的值. 思路: 用主席树直接维护历史版本即可. 代码: #include<bits/stdc++.h> ...

  9. HDU 1536 S-Nim (组合游戏+SG函数)

    题意:针对Nim博弈,给定上一个集合,然后下面有 m 个询问,每个询问有 x 堆石子 ,问你每次只能从某一个堆中取出 y 个石子,并且这个 y 必须属于给定的集合,问你先手胜还是负. 析:一个很简单的 ...

  10. elasticsearch-环境搭建

    1:下载并安装JDK 下载地址:jdk-8u91-windows-x64.exe 2:下载elasticsearch压缩包 下载地址:elasticsearch-2.3.0.zip 下载之后解压缩文件 ...