html轮播图片加超链接,html图片轮播代码

html

head

meta http-equiv=Content-Type content=text/html; charset=gbk /

title/title

style

!--

body, ul, li, p {

margin: 0;

padding: 0;

}

ul{

list-style-type:none;

}

body {

font-family:Times New Roman, Times, serif;

}

#box {

position:relative;

width:492px;

height:172px;

margin:10px auto;

}

#box .imgList{

position:relative;

width:490px;

height:170px;

overflow:hidden;

}

#box .imgList li{

position:absolute;

top:0;

left:0;

width:490px;

height:170px;

}

#box .countNum{

position:absolute;

right:0;

bottom:5px;

}

#box .countNum li{

width:20px;

height:20px;

float:left;

color:#fff;

border-radius:20px;

background:#f90;

text-align:center;

margin-right:5px;

cursor:pointer;

opacity:0.7;

filter:alpha(opacity=70);

}

#box .countNum li.current{

background:#f60;

font-weight:bold;

opacity:1;

filter:alpha(opacity=70);

}

--

/style

script

!--

function runImg(){}

runImg.prototype={

bigbox:null,//最外层容器

boxul:null,//子容器ul

imglist:null,//子容器img

numlist:null,//子容器countNum

prov:0,//上次显示项

index:0,//当前显示项

timer:null,//控制图片转变效果

play:null,//控制自动播放

imgurl:[],//存放图片

count:0,//存放的个数

$:function(obj)

{

if(typeof(obj)==string)

{

if(obj.indexOf(#)=0)

{

obj=obj.replace(#,);

if(document.getElementById(obj))

{

return document.getElementById(obj);

}

else

{

alert(没有容器+obj);

return null;

}

}

else

{

return document.createElement(obj);

}

}

else

{

return obj;

}

},

//初始化

info:function(id)

{

this.count=this.count=5?this.count:5;

this.bigbox=this.$(id);

for(var i=0;i2;i++)

{

var ul=this.$(ul);

for(var j=1;j=this.count;j++)

{

var li=this.$(li);

li.innerHTML=i==0?this.imgurl[j-1]:j;

ul.appendChild(li);

}

this.bigbox.appendChild(ul);

}

this.boxul=this.bigbox.getElementsByTagName(ul);

this.boxul[0].className=imgList;

this.boxul[1].className=countNum;

this.imglist=this.boxul[0].getElementsByTagName(li);

this.numlist=this.boxul[1].getElementsByTagName(li);

for(var j=0;jthis.imglist.length;j++)

{

this.alpha(j,0);

}

this.alpha(0,100);

this.numlist[0].className=current;

},

//封装程序入口

action:function(id)

{

this.autoplay();

this.mouseoverout(this.bigbox,this.numlist);

},

//图片切换效果

imgshow:function(num,numlist,imglist)

{

this.index=num;

var pralpha=100;

var inalpha=0;

for(var i=0;inumlist.length;i++)

{

numlist[i].className=;

}

numlist[this.index].className=current;

clearInterval(this.timer);

for(var j=0;jthis.imglist.length;j++)

{

this.alpha(j,0);

}

this.alpha(this.prov,100);

this.alpha(this.index,0);

var $this=this;

//利用透明度来实现切换图片

this.timer=setInterval(function(){

inalpha+=2;

pralpha-=2;

if(inalpha100){inalpha=100};//不能大于100

if(pralpha0){pralpha=100};

//为兼容性赋样式

$this.alpha($this.prov,pralpha);

$this.alpha($this.index,inalpha);

if(inalpha==100&&pralpha==0){clearInterval($this.timer)};//当等于100的时候就切换完成了

},20)//经测试20是我认为最合适的值

},

//设置透明度

alpha:function(i,opacity){

this.imglist[i].style.opacity=opacity/100;

this.imglist[i].style.filter=alpha(opacity=+opacity+);

},

//自动播放

autoplay:function(){

var $this=this;

this.play=setInterval(function(){

$this.prov=$this.index;

$this.index++;

if($this.index$this.imglist.length-1){$this.index=0};

$this.imgshow($this.index,$this.numlist,$this.imglist);

},2000)

},

//处理鼠标事件

mouseoverout:function(box,numlist)

{

var $this=this;

box.οnmοuseοver=function()

{

clearInterval($this.play);

}

box.οnmοuseοut=function()

{

$this.autoplay($this.index);

}

for(var i=0;inumlist.length;i++)

{

numlist[i].index=i;

numlist[i].οnmοuseοver=function(){

$this.prov=$this.index;

$this.imgshow(this.index,$this.numlist,$this.imglist);

}

}

}

}

window.οnlοad=function(){

var runimg=new runImg();

runimg.count=5;

runimg.imgurl=[

img src=\http://i.mmcdn.cn/simba/img/T117eTXmXqXXXXXXXX.jpg\/,

img src=\http://img03.taobaocdn.com/tps/i3/T1t8eTXbBtXXXXXXXX-490-170.png\/,

img src=\http://i.mmcdn.cn/simba/img/T1OVOUXeNjXXXXXXXX.jpg\/,

img src=\http://i.mmcdn.cn/simba/img/T1J.9TXc8lXXXXXXXX.jpg\/,

img src=\http://img03.taobaocdn.com/tps/i3/T1ITuTXbRnXXXXXXXX-490-170.png\/];

runimg.info(#box);

runimg.action(#box);

}

--

/script

/head

body

div id=box/div

/body

/html

图片链接在最下面的img src下修改 你也懂

取消

评论