图片随机翻转
2016-04-26 19:54
357 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机翻转</title>
<style type="text/css">
body{
background-color: #ccc;
}
ul{
margin: 20px auto 0;
padding: 0;
width: 600px;
}
li{
list-style-type: none;
float: left;
width: 280px;
margin: 0 10px;
position: relative;
height: 120px;
overflow: hidden;
}
img{
height: 120px;
width: 280px;
}
div{
position: absolute;
top:0;
}
</style>
</head>
<body>
<ul>
<li>
<div><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""></div>
</li>
<li>
<div><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/6.jpg" alt=""></div>
</li>
<li>
<div><img src="img/5.jpg" alt=""><img src="img/6.jpg" alt=""><img src="img/7.jpg" alt=""></div>
</li>
<li>
<div><img src="img/7.jpg" alt=""><img src="img/8.jpg" alt=""><img src="img/5.jpg" alt=""><img src="img/1.jpg" alt=""></div>
</li>
<li>
<div><img src="img/2.jpg" alt=""><img src="img/1.jpg" alt=""></div>
</li>
<li>
<div><img src="img/4.jpg" alt=""><img src="img/3.jpg" alt=""></div>
</li>
<li>
<div><img src="img/8.jpg" alt=""><img src="img/7.jpg" alt=""></div>
</li>
<li>
<div><img src="img/6.jpg" alt=""><img src="img/5.jpg" alt=""></div>
</li>
</ul>
</body>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
var aDiv=document.getElementsByTagName('div');
var oLi=document.getElementsByTagName('li')[0];
var
//翻动一屏的长度。
H=parseFloat(getStyle(oLi,'height'));
function fn(obj){
//随机定时器的触发时间。
setTimeout(function(){
//做运动。
move(obj,'top',20,-obj.num*H,function(){
//进行下一次运动。
obj.num++;
obj.num%=obj.len;
//运动结束再次开始。
fn(obj);
});
//随机时间。
}, Math.random()*2000)
}
for(var i=0;i<aDiv.length;i++){
//用自定义属性保存可以翻动多少屏
aDiv[i].len=aDiv[i].getElementsByTagName('img').length;
aDiv[i].num=Math.floor(Math.random()*aDiv[i].len);//当前翻动的位置。
//通过传参实现多个翻动。
fn(aDiv[i]);
}
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机翻转</title>
<style type="text/css">
body{
background-color: #ccc;
}
ul{
margin: 20px auto 0;
padding: 0;
width: 600px;
}
li{
list-style-type: none;
float: left;
width: 280px;
margin: 0 10px;
position: relative;
height: 120px;
overflow: hidden;
}
img{
height: 120px;
width: 280px;
}
div{
position: absolute;
top:0;
}
</style>
</head>
<body>
<ul>
<li>
<div><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""></div>
</li>
<li>
<div><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/6.jpg" alt=""></div>
</li>
<li>
<div><img src="img/5.jpg" alt=""><img src="img/6.jpg" alt=""><img src="img/7.jpg" alt=""></div>
</li>
<li>
<div><img src="img/7.jpg" alt=""><img src="img/8.jpg" alt=""><img src="img/5.jpg" alt=""><img src="img/1.jpg" alt=""></div>
</li>
<li>
<div><img src="img/2.jpg" alt=""><img src="img/1.jpg" alt=""></div>
</li>
<li>
<div><img src="img/4.jpg" alt=""><img src="img/3.jpg" alt=""></div>
</li>
<li>
<div><img src="img/8.jpg" alt=""><img src="img/7.jpg" alt=""></div>
</li>
<li>
<div><img src="img/6.jpg" alt=""><img src="img/5.jpg" alt=""></div>
</li>
</ul>
</body>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
var aDiv=document.getElementsByTagName('div');
var oLi=document.getElementsByTagName('li')[0];
var
//翻动一屏的长度。
H=parseFloat(getStyle(oLi,'height'));
function fn(obj){
//随机定时器的触发时间。
setTimeout(function(){
//做运动。
move(obj,'top',20,-obj.num*H,function(){
//进行下一次运动。
obj.num++;
obj.num%=obj.len;
//运动结束再次开始。
fn(obj);
});
//随机时间。
}, Math.random()*2000)
}
for(var i=0;i<aDiv.length;i++){
//用自定义属性保存可以翻动多少屏
aDiv[i].len=aDiv[i].getElementsByTagName('img').length;
aDiv[i].num=Math.floor(Math.random()*aDiv[i].len);//当前翻动的位置。
//通过传参实现多个翻动。
fn(aDiv[i]);
}
</script>
</html>
相关文章推荐
- 二叉树平摊
- KMP算法的next[]数组通俗解释
- windows脚本设置ip
- #include<file.h>与#include"file.h"的区别
- Bluetooth蓝牙
- 指针中的运算符的结合性
- 在linux本地下载ftp中的文件
- LoRaWAN 规范 1.0 (6)
- 4月份英语学习
- 实现一个简洁版的String类
- openwrt之uhttpd
- linux系统编程之进程(四):进程退出exit,_exit区别即atexit函数
- 团队冲刺第一阶段个人工作总结8
- 详解C++类的内存分布结构
- Centos7-修复心脏滴血漏洞
- 剑指offer-面试题54:表示数值的字符串
- 读书笔记--PRML(1)
- js中出现missing ) after argument list
- JAVA学习15_Java 中与时间有关的几个问题
- 修改UITextField placeholder 文字颜色