"图片小轮换
来源:互联网 发布:淘宝盗图处罚规则新规 编辑:程序博客网 时间:2024/04/20 20:52
图片轮换,网页上很常见的效果,简单的模仿一下 先写个滤镜效果的。(IE Only)
简单说一下滤镜切换
obj.filters.revealTrans.Transition=Math.floor(Math.random()*23) //使用滤镜,先要把图片设置滤镜属性
obj.filters.revealTrans.apply(); // 首先加载滤镜
obj.filters.revealTrans.play(); // 运行滤镜
效果 值
盒状收缩 0
盒状展开 1
圆形收缩 2
圆形展开 3
向上擦除 4
向下擦除 5
向左擦除 6
向右擦除 7
垂直百页窗 8
水平百页窗 9
横向棋盘式 10
纵向棋盘式 11
溶解 12
左右向中部收缩 13
中部向左右展开 14
上下向中部收缩 15
中部向上下展开 16
阶梯状向左下展开 17
阶梯状向左上展开 18
阶梯状向右下展开 19
阶梯状向右上展开 20
随机水平线 21
随机垂直线 22
随机 23
另外说一下 setTimeout的用法
setTimeout (表达式,延时时间)
setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
有2中写法
setTimeout("test()",1000);
setTimeout(test,1000); //没引号,没括号
setTimeout如何传递参数。。。
可以写成 setTimeout(function(){ss(can)},1000) //我比较喜欢这中
setTImeout("ss("+can+")",100)
同样的 在封装的时候 要用到this也可以这么写
var self = this
setTimeout(function(){self.ss(can)},1000)
- <style type="text/css">
.img{ width:328px !important;width:330px; height:240px; border:1px solid #666666; border-bottom:none}
.bottom{ height:31px; width:328px !important;width:330px; border:1px solid #666666; border-top:none; background-image: url(http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174251431.t.gif) }
.information{ height:31px; width:220px; float:left; font-size:14px; text-align:center; vertical-align:middle; line-height:31px;}
.div1{ width:13px; height:19px; overflow:hidden; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174359116.t.gif); float:left; margin-left:25px; margin-top:5px; text-align:center; cursor:pointer}
.div2{ width:13px; height:19px; overflow:hidden; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174510802.t.gif); float:left; margin-left:14px; margin-top:5px; text-align:center;cursor:pointer}
.div3{ width:13px; height:19px; overflow:hidden; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174510802.t.gif); float:left; margin-left:14px; margin-top:5px; text-align:center;cursor:pointer}
</style> - <body>
<div id="ss"></div>
</body>
<script>
function ImgSwitch(id,data,text){
this.obj = document.getElementById(id) //父元素
this.data = data //图片数据源
this.i = 0 //记录现在是哪张图片
this.img = "" //记录img元素
this.div = new Array() //存放3个显示数字的div
this.timer = "" //记录那个定时器的
this.text = text
this.j = 0
this.textdiv = ""
} - ImgSwitch.prototype.Framework=function(){
var self = this
var divimg = document.createElement("div")
divimg.className = "img"
this.obj.appendChild(divimg)
var img = document.createElement("img")
this.img = img
img.style.filter = "revealTrans()";
img.src = this.data[0]
divimg.appendChild(img)
var divbottom = document.createElement("div")
divbottom.className = "bottom"
this.obj.appendChild(divbottom)
var divinformation = document.createElement("div")
divinformation.className = "information"
divinformation.innerHTML = this.text[0]
this.textdiv = divinformation
divbottom.appendChild(divinformation)
var div1 = document.createElement("div")
div1.className = "div1"
div1.innerHTML = 1
div1.onclick=function(){self.Change(0)}
this.div.push(div1)
divbottom.appendChild(div1)
var div2 = document.createElement("div")
div2.className = "div2"
div2.innerHTML = 2
div2.onclick=function(){self.Change(1)}
this.div.push(div2)
divbottom.appendChild(div2)
var div3 = document.createElement("div")
div3.className = "div3"
div3.innerHTML = 3
div3.onclick=function(){self.Change(2)}
this.div.push(div3)
divbottom.appendChild(div3)
this.timer=setTimeout(function(){self.Switch()},3000)
} - ImgSwitch.prototype.Switch=function(){
var self = this
this.i++
this.j++
if(this.i==this.data.length) {this.i=0;this.j=0}
this.img.filters.revealTrans.Transition=Math.floor(Math.random()*23)
this.img.filters.revealTrans.apply();
this.img.filters.revealTrans.play();
this.img.src = this.data[this.i]
for(var j=0;j<this.div.length;j++)
{this.div[j].style.backgroundImage="url(http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174510802.t.gif)"}
this.textdiv.innerHTML = this.text[this.j]
this.div[this.i].style.backgroundImage="url(http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174359116.t.gif)"
this.timer=setTimeout(function(){self.Switch()},4000)
} - ImgSwitch.prototype.Change=function(num){
var self = this
clearTimeout(this.timer)
for(var j=0;j<this.div.length;j++)
{this.div[j].style.backgroundImage="url(http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174510802.t.gif)"}
this.div[num].style.backgroundImage="url(http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174359116.t.gif)"
this.textdiv.innerHTML=this.text[num]
this.i=num;this.j=num
this.img.filters.revealTrans.Transition=23
this.img.filters.revealTrans.apply();
this.img.filters.revealTrans.play();
this.img.src = this.data[this.i]
this.timer=setTimeout(function(){self.Switch()},3000)
}
var text=["关之琳穿花裙高调亮相美女老了","《嫂嫂19岁》垃圾片,抵制韩片","《剑蝶》迟到引不满,笨蛋呀"]
var data = ["http://album.hi.csdn.net/app_uploads/wtcsy/20081212/173755501.p.jpg","http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174009419.p.jpg","http://album.hi.csdn.net/app_uploads/wtcsy/20081212/174203244.p.jpg"]
var oo = new ImgSwitch("ss",data,text)
oo.Framework()
</script>
上面是一个ie only的 唉 。。。不兼容呀
下面这个是从无缝滚动发展出来的。开始觉得比较简单
结果发现 跟上面的那个完全不是一个等级的。。。。
- <style type="text/css">
- .wai{height:168px;width:408px; overflow:hidden}
- .showdiv{ height:20px; width:18px; border:0px;position:relative; background-color:#FF7300; float:left; color:#FFFFFF; line-height:20px; text-align:center; vertical-align:middle; font-size:14px; font-weight:bold; cursor:pointer}
- .div{ height:18px; width:18px; border:1px solid #FF7300;top:-366px;position:relative; background-color:#FFFFFF; float:left;line-height:18px; text-align:center; vertical-align:middle; font-size:12px; color:#FF7300; cursor:pointer}
- .imgdiv{height:168px;width:408px;}
- </style>
- <body><div id="ss"></div><br><br><br><div id="sss"></div></body>
- <script>
- function Img(id,data,height,amount){
- this.obj = document.getElementById(id)
- this.data = data
- this.Location = ["300px","310px","320px"]
- this.timer = ""
- this.div =""
- this.step = 0
- this.i = 0
- this.j = 0 //在哪张图片上
- this.Isdirection = "on" //控制方向
- this.Isonclick = false
- this.num = 1
- this.amount = amount
- this.height = height
- }
- Img.prototype.Create=function(){
- var self = this
- var div = document.createElement("div")
- div.className = "wai"
- this.div = div
- this.obj.appendChild(div)
- for( var i= 0; i<this.amount;i++)
- {
- var imgdiv = document.createElement("div")
- imgdiv.className = "imgdiv"
- div.appendChild(imgdiv)
- var img = document.createElement("img")
- img.src = this.data[i];
- imgdiv.appendChild(img)
- }
- for( var i= 0; i<this.data.length; i++)
- {
- var div1 =document.createElement("div")
- div1.className = "div";div1.style.top = "-366px"
- if(i==0)div1.className = "showdiv"
- div1.innerHTML = i+1
- div1.style.left = this.Location[i];
- (function(i){div1.onclick=function(){self.Judge(self.j,i)}})(i);
- div.appendChild(div1)
- }
- this.timer = setTimeout(function(){self.Move()},2000)
- }
- Img.prototype.Move=function(){
- var self = this
- var div = this.div.getElementsByTagName("div")
- this.step = this.Isdirection == "on"?(Math.floor(this.height/4))*this.num:-(Math.floor(this.height/4))*this.num
- var yu = this.height%4
- if(this.i!=4)
- {
- this.i++
- this.div.scrollTop = this.div.scrollTop + this.step
- for(var i = 3 ; i<6; i++)
- { div[i].style.top = parseInt(div[i].style.top) + this.step }
- this.timer = setTimeout(function(){self.Move()},1)
- }
- else
- {
- this.i=0;
- if(this.Isdirection == "on"){this.j++;if(this.num!=1)this.j++; yu = Math.abs(yu)}
- if(this.Isdirection == "down"){this.j--;if(this.num!=1)this.j--;yu =-Math.abs(yu)}
- if(this.j==2) this.Isdirection = "down"
- if(this.j==0) this.Isdirection = "on"
- this.div.scrollTop = this.div.scrollTop + yu
- for(var i = 3 ; i<6; i++)
- { div[i].style.top = parseInt(div[i].style.top) + yu ;div[i].className = "div"; }
- div[this.j+3].className = "showdiv"
- this.num=1
- this.timer = setTimeout(function(){self.Move()},2000)
- }
- }
- Img.prototype.Judge=function(start,end){
- var self = this
- clearTimeout(this.timer)
- if(end == start){this.timer = setTimeout(function(){self.Move()},2000);return}
- this.Isdirection=(end > start)?"on":"down"
- this.Isonclick = true
- this.num = Math.abs(end-start)
- this.Move()
- }
- var data = ["http://album.hi.csdn.net/app_uploads/wtcsy/20081216/093508656.p.jpg","http://album.hi.csdn.net/app_uploads/wtcsy/20081216/093747234.p.jpg","http://album.hi.csdn.net/app_uploads/wtcsy/20081216/093922593.p.gif"]
- window.onload=function()
- {var oo = new Img("ss",data,168,3)
- oo.Create()
- }
- </script>
- "图片小轮换
- 图片轮换
- 图片轮换
- 图片轮换
- 图片轮换
- 图片轮换
- 图片轮换
- 图片轮换效果
- 图片渐变轮换效果
- 图片渐变轮换效果
- 图片渐变轮换效果
- 图片渐变轮换效果
- 图片轮换2
- 图片渐变轮换效果
- CSDN-实现图片轮换
- 图片渐变轮换效果
- 图片轮换播放器
- 图片轮换渐变效果
- 快速排序(原创)
- 用Java建立WEB邮件系统
- 信息安全系统
- 学黑客必去的网站
- 怎样才可以使断网时不发生死锁,急!急!急!v
- "图片小轮换
- 哈佛商业管理寓言13则
- 关于RTX51tny的一些心得
- WPF实例秀——如何获取UI元素的图像
- Java内存泄漏概念及解决办法
- FusionCharts参数简单说明
- 改变struts2默认配置路径
- MYSQL的用户变量(@)和系统变量(@@)
- How to run dbus and obex-data-server on ARM-xScale