随机图片滚动（随机数+变化函数），可运行

最新推荐文章于 2021-06-07 14:03:40 发布
最新推荐文章于 2021-06-07 14:03:40 发布
阅读量643 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/510136
版权

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>随机图片滚动</title>

<!--可成功执行，布局有点混乱...懒得改了。需要一个js文件，在上一文章中有-->

<style type="text/css">

*{

padding:0;

margin: 0;

}

li,ul{

list-style: none;

}

#parent{

margin: 0 auto;

width: 830px;

height: 900px;

border:3px solid #C1C1C1;

margin-top: 50px;

}

#parent>ul>li{

float: left;

width: 400px;

height: 225px;

}

#parent>ul>li ul{

width: 380px;

height: 200px;

position: relative;


}

#parent>ul>li li{

width: 380px;

height: 200px;

position: relative;

}

img{

}

</style>

<script src="miaov.js"></script>

<script type="text/javascript">

window.οnlοad=function(){

 var setTime=null;

 setTime=setInterval(function(){

 //bianhuan(7);

 //返回一个X-Y之间的随机数

var num =stochastic(0,7);

bianhuan(num);

},500);

}

function bianhuan(a){

//var obj=getID('son');

//让层上下左右移动 ，参数   标签对象，上/下/左/右,终点距离,回调函数 

 

var Oli=document.getElementsByName("fail");

var Oul=Oli[a].getElementsByTagName("ul")[0];

var Tli=Oul.getElementsByTagName("li");

doMove ( Oul, 'top', 15, -200,function(){

Oul.style.top='0px';

Oul.insertBefore(Tli[0],Tli[Tli.length]);

});

}

function getID(obj){

return document.getElementById(obj);

}


</script>

</head>

<body>

<div id="parent">

                <!--图片途径改-->

<ul id="son">

<li name="fail">

<div style="margin: 20px;

width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="images/scenery_1.jpg" width=380 height=200/></li>

<li><img src="images/scenery_2.jpg" width=380 height=200/></li>

<li><img src="images/scenery_3.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail" ><div style="margin: 20px;

width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="images/scenery_4.jpg" width=380 height=200/></li>

<li><img src="images/scenery_5.jpg" width=380 height=200/></li>

<li><img src="images/scenery_6.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div style="margin: 20px;

width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="images/scenery_7.jpg" width=380 height=200/></li>

<li><img src="images/scenery_8.jpg" width=380 height=200/></li>

<li><img src="images/scenery_9.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div style="margin: 20px;

width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="images/scenery_10.jpg" width=380 height=200/></li>

<li><img src="images/scenery_11.jpg" width=380 height=200/></li>

<li><img src="images/scenery_12.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div style="margin: 20px;

width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="images/scenery_13.jpg" width=380 height=200/></li>

<li><img src="images/scenery_14.jpg" width=380 height=200/></li>

<li><img src="images/scenery_15.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div style="margin: 20px;

width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="images/scenery_16.jpg" width=380 height=200/></li>

<li><img src="images/scenery_17.jpg" width=380 height=200/></li>

<li><img src="images/scenery_18.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div style="margin: 20px;

width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="images/scenery_19.jpg" width=380 height=200/></li>

<li><img src="images/scenery_20.jpg" width=380 height=200/></li>

<li><img src="images/scenery_21.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div style="margin: 20px;

width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="images/scenery_22.jpg" width=380 height=200/></li>

<li><img src="images/scenery_23.jpg" width=380 height=200/></li>

<li><img src="images/scenery_24.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

</ul>

</div>

</body>

</html>

1
< br >



本文转自 沉迷学习中 51CTO博客，原文链接：http://blog.51cto.com/12907581/1924655，如需转载请自行联系原作者
weixin_33978044
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[练习5]js学习之利用随机数滚动出现图片
beiyuxinke的博客
04-04 676
    #adContainer{   border: 1px #A5ACB2 solid;   width: 500px;   height: 500px;   overflow: hidden;  }  var baseUrl = "img/";  //为图片设置权重  var ads = new Array(["1.jpg",1
通过随机数动态产生滚动数字的效果
12-10
通过随机数动态产生滚动数字的效果 适用于彩票系统
随机图片滚动
weixin_34174322的博客
12-28 200
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript" src="float.js"> </script> <script t...
关于实现图片滚动
weixin_33836874的博客
12-21 114
2019独角兽企业重金招聘Python工程师标准>>> ...
gatsby_使用Gatsby和Netlify函数构建无限滚动图片库
culiu9261的博客
07-21 710
gatsbyWhat's the trend about static sites and decoupled development architectures with the JAMStack? Why are top sites and apps moving to build with "static site generators"? It's speed, security, aff...
易语言窗口正反图片滚动+随机滚动
05-28
综上所述，这个“易语言窗口正反图片滚动+随机滚动”的实现涉及了易语言的基础知识，包括窗口组件、图片处理、事件驱动编程、数组操作以及随机数生成等。通过这个项目，开发者不仅可以提升易语言的实践能力，还能...
jQuery新年年会随机手机号码滚动抽奖代码
06-10
通常，这个函数会利用JavaScript的Math.random()生成一个随机数，再结合固定的电话区号，组合成一个随机的手机号码。接着，通过jQuery的动画方法（如`slideUp()`、`slideDown()`等）让这些号码以滚动的形式呈现。当...
JavaScript网页制作特殊效果用随机数
10-30
特点：文字颜色及大小可随机的变化。 延伸：可在网页中添加多组代码，其中font11分别代表不同的文字，今后是font12、font13等等，文字可表现为每个都不同。 2. 图片淡入淡出效果 图片淡入淡出效果是指使用...
范围内随机抽取滚动效果
12-05
总的来说，实现"范围内随机抽取滚动效果"涉及的技术包括随机数生成、图形用户界面设计、事件监听、文件操作以及可能的图像处理。开发者需要具备扎实的编程基础，了解并掌握这些关键技能，才能构建出高效、用户友好的...
年会抽奖程序----滚动图片
02-01
4. **随机数生成**：抽奖的核心是随机选取获胜者，这需要使用到编程语言提供的随机数生成函数。 5. **文件读取与管理**：程序需要加载图片文件，可能涉及到文件路径处理、错误处理等。 6. **事件驱动编程**：用户...
Random()随机数+随机切换图片
03-30
NULL 博文链接：https://jun1986.iteye.com/blog/1308651
数字随机滚动
02-01
用unity 做的一个小东西，2位数字的上下随机滚动，类似抽奖
在线随机数生成器-crx插件
04-05
语言:中文 (简体) 在线随机数生成器，可以随机生成你设定的随机数，可以是唯一的或者重复的，可以应用于dota2roll点器，魔兽roll点辅助工具，抽奖或者需要随机数字的应用中。 简介：在线随机数生成器，可以随机生成你设定的随机数，可以是唯一的或者重复的，可以应用于dota2roll点器，魔兽roll点辅助工具，抽奖或者需要随机数字的应用中。功能说明：在线随机数生成器，可以随机生成你设定的随机数，可以是唯一的或者重复的，可以应用于dota2roll点器，魔兽roll点辅助工具，抽奖或者需要随机数字的应用中。随机数最重要的特性是它在产生是后面的那个数与前面的那个数毫无关系。
ppt实现随机数效果
04-28
这个ppt是用于抽奖，点击开始抽取就会随机滚动数字，点击停止时，则会显示抽取到的数字。
achartengine 利用随机数产生的动态线性图和柱形图
05-18
类似于股票期货这种
QT实现简单滚动随机数生成程序
YOSO的专栏
02-18 880
刚学QT，无聊时做了一个小小的随机数生成的程序，实现日常生活中“抽签”的效果。平台： Linux源文件：https://sourceforge.net/projects/makerandnumber/files/经验： 使用 void QTest::qWait ( int ms ) 时，包含头文件,并且在工程文件.pro中要加入语句 p, li { white-space: pre-wrap; } CONFIG+=qtestlib，不然无法使用QTest
随机数 随机图片显示
MY Dream
05-30 696
<br />随机数文件 aspx<br /><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Import Namespace="System.IO" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
html随机页面,HTML - 页面随机打开滚动点
weixin_39614528的博客
06-07 272
我创建了一个网页并发现了奇怪的问题。 当我尝试从主页进入子页面时，出现子页面，但是向下滚动。它可能会出现在顶部，它在电脑上确实 - 但在手机上不是。有一个代码：HTML(从主体部分)：HTML - 页面随机打开滚动点Go to mainSome centered stuff thereChangelogDownloadChangelog(Top)Some changelog stuffDownlo...
C++基础知识篇：C++ 数字
miaozenn的博客
12-08 917
​ 通常，当我们需要用到数字时，我们会使用原始的数据类型，如 int、short、long、float 和 double 等等。这些用于数字的数据类型，其可能的值和数值范围，我们已经在 C++ 数据类型一章中讨论过。 C++ 定义数字 我们已经在之前章节的各种实例中定义过数字。下面是一个 C++ 中定义各种类型数字的综合实例： #include <iostream> using namespace std; int main () { // 数字定义 short s;...
随机生成0或1的随机数函数
最新发布
04-27
上面的代码中，srand()函数用于设置rand()的随机种子，time(NULL)返回当前时间的秒数，从而保证每次运行程序时，生成的随机数都不同。rand()返回一个[0, RAND_MAX]范围内的随机数，取余2后得到0或1的随机数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值