"图片小轮换

最新推荐文章于 2021-06-04 08:33:11 发布

wtcsy

最新推荐文章于 2021-06-04 08:33:11 发布

阅读量916

点赞数

文章标签： div function float url border ie

本文链接：https://blog.csdn.net/wtcsy/article/details/3505520

版权

图片轮换，网页上很常见的效果，简单的模仿一下先写个滤镜效果的。（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.οnclick=function(){self.Change(0)}
this.div.push(div1)
    divbottom.appendChild(div1)
var div2 = document.createElement("div")
    div2.className = "div2"
div2.innerHTML = 2
div2.οnclick=function(){self.Change(1)}
this.div.push(div2)
    divbottom.appendChild(div2)
var div3 = document.createElement("div")
    div3.className = "div3"
    div3.innerHTML = 3
div3.οnclick=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.οnclick=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.οnlοad=function()
{var oo   = new Img("ss",data,168,3)
    oo.Create()
    }
</script>
 
 

wtcsy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
"图片小轮换

图片轮换，网页上很常见的效果，简单的模仿一下先写个滤镜效果的。（IE Only）简单说一下滤镜切换obj.filters.revealTrans.Transition=Math.floor(Math.random()*23) //使用滤镜，先要把图片设置滤镜属性obj.filters.revealTrans.apply();
复制链接

扫一扫