打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
图片轮播代码2(html)

很奇怪,被收藏的代码总是这个。还有人发消息探讨。

事实上最初那个来自w3c的代码我已经不怎么用。

我觉得这个更好。

演示效果地址:coding

http://5sk8yx.coding-pages.com/

代码全文如下:



 <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:230px;

height:600px;

margin:0px auto;

}

#box .imgList{

position:relative;

width:230px;

height:600px;

overflow:hidden;

}

#box .imgList li{

position:absolute;

top:0;

left:0;

width:230px;

height:600px;

}

#box .countNum{

position:absolute;

right:0;

bottom:8px;

}

#box .countNum li{

width:20.5px;

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<=9?this.count:9;

this.bigbox=this.$(id);

for(var i=0;i<2;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;j<this.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;i<numlist.length;i++)

{

numlist[i].className="";

}

numlist[this.index].className="current";

clearInterval(this.timer);

for(var j=0;j<this.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(inalpha>100){inalpha=100};//不能大于100

if(pralpha<0){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);

},9000)

},

//处理鼠标事件

mouseoverout:function(box,numlist)

{

var $this=this;

box.onmouseover=function()

{

clearInterval($this.play);

}

box.onmouseout=function()

{

$this.autoplay($this.index);

}

for(var i=0;i<numlist.length;i++)

{

numlist[i].index=i;

numlist[i].onmouseover=function(){

$this.prov=$this.index;

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

}

}

}

}

window.onload=function(){

var runimg=new runImg();

runimg.count=9;

runimg.imgurl=[

"<img src=\"1.jpg\"/>",

"<img src=\"2.jpg\"/>",





"<img src=\"3.jpg\"/>",









"<img src=\"4.jpg\"/>",



"<img src=\"5.jpg\"/>",



"<img src=\"6.jpg\"/>",



"<img src=\"7.jpg\"/>",









"<img src=\"8.jpg\"/>",



















"<img src=\"9.jpg\"/>"];









runimg.info("#box");

runimg.action("#box");

}

-->

</script>

</head>



<body>

<div id="box"></div>

</body>

</html>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
JS图片效果
根据鼠标放上切换内容制作的图片导航
CSS+JS自动改变切换方向的图片幻灯切换效果
原生JS实现旋转木马轮播图特效
代码入门教程(14)
最新图片滤镜效果代码(十一款) - 寒情的日志 - 网易博客
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服