先看效果
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>taobao首页轮播原生js面向对象封装版</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
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;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");
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 alpha=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<imglist.length;j++)
{
imglist[j].style.opacity=0;
imglist[j].style.filter="alpha(opacity=0)";
}
var $this=this;
//利用透明度来实现切换图片
this.timer=setInterval(function(){
alpha+=2;
if(alpha>100){alpha=100};//不能大于100
//为兼容性赋样式
imglist[$this.index].style.opacity=alpha/100;
imglist[$this.index].style.filter="alpha(opacity="+alpha+")";
if(alpha==100){clearInterval($this.timer)};//当等于100的时候就切换完成了
},20)//经测试20是我认为最合适的值
},
//自动播放
autoplay:function(){
var $this=this;
this.play=setInterval(function(){
$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.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.imgshow(this.index,$this.numlist,$this.imglist);
}
}
}
}
window.onload=function(){
var runimg=new runImg();
runimg.count=5;
runimg.imgurl=[
"<img src=\"//ku.shouce.ren/files/images/201601/56a34a983a5f2.jpg\"/>",
"<img src=\"//ku.shouce.ren/files/images/201601/56a34a9b0aa0b.jpg\"/>",
"<img src=\"//ku.shouce.ren/files/images/201601/56a34a9e8992e.jpg\"/>",
"<img src=\"//ku.shouce.ren/files/images/201601/56a34aa0cfac2.jpg\"/>",
"<img src=\"//ku.shouce.ren/files/images/201601/56a34aa497189.jpg\"/>"];
runimg.info("#box");
runimg.action("#box");
}
-->
</script>
</head>
<body>
<center><h1>Author:wyf</h1><p>2012/2/24</p></center>
<div id="box"></div>
</body>
</html>
游客
2024-07-14 13:35:53 回复
楼主看起来很有学问！http://njve.tzkangda.net/test/706826459.html
游客
2024-07-17 10:32:58 回复
怪事年年有，今年特别多！http://songshan.viptor.cn
游客
2024-07-18 22:12:54 回复
在哪里跌倒，就在那里多爬一会儿！http://test.tzkangda.net/test/
游客
2024-07-19 11:54:31 回复
楼上的这是啥态度呢？https://sdceda.com/lao/180556437/
游客
2024-07-19 16:12:58 回复
赞一个！http://test.scifine.net/test/
游客
2024-07-24 19:52:55 回复
看了这么多帖子，第一次看到这么经典的！http://www.dnf70.com/2789.html
游客
2024-07-28 00:32:31 回复
十分赞同楼主！http://www.a5km.com/yxgl/dnf/22755.html
游客
2024-07-30 18:20:11 回复
楼主的帖子越来越有深度了！http://www.8lds.com
2024澳门新资料大全免费
2024-08-02 17:58:49 回复
楼主是好人！http://esa.bdk6.com
8001直播
2024-08-03 04:48:09 回复
楼上的很有激情啊！http://b35cr0.http://www.worldwidesecurities-gh.com
游客
2024-08-04 23:01:04 回复
以后要跟楼主好好学习学习！http://4qtq.life-net.cn
游客
2024-08-05 08:32:41 回复
今天上网不回帖，回帖就回精华帖！http://0jlp.enwellbags.cn
3d500期跨度走势图带连线专业版
2024-08-06 08:43:55 回复
最近回了很多帖子，都没人理我！http://wr3.dalianmoving.com
166手机彩店下载
2024-08-07 18:42:26 回复
感谢楼主的推荐！http://ue9q3.ssc920.com
黑客业务网
2024-08-08 22:34:54 回复
楼主写的很经典！http://7xqr.ibainfo.com
创世pc推荐不看成绩
2024-08-09 05:02:06 回复
无图无真相！http://a7f0.zr3.net
澳洲10开官网历史开奖结果
2024-08-09 15:23:15 回复
楼主的帖子提神醒脑啊！http://g2umu8.jiyustore.com
3d最简单公式最准确
2024-08-09 19:28:37 回复
今天是个特别的日子，值得纪念！http://a917.puimztk.com
pk10九码滚雪球方案
2024-08-10 18:04:07 回复
吹牛的人越来越多了！http://zp1n8s.fshih.com
游客
2024-08-11 12:01:11 回复
大神就是大神，这么经典！http://www.a5km.com/yxgl/jdqs/28855.html
完成即可自动领取短信彩金68
2024-08-11 22:33:39 回复
看了这么多帖子，第一次看到这么高质量内容！http://w2fov.igiam.com
旧版微信6.0
2024-08-12 14:33:10 回复
看了这么多帖子，第一次看到这么经典的！http://z0mx1t.gdgzzhonghong.com
澶╅緳鍏儴鍙戝竷缃?
2024-08-12 19:13:55 回复
看帖不回帖的人就是耍流氓，我回复了！http://146ywy.scedu.wang
大发游戏城
2024-08-13 08:03:41 回复
楼主看起来很有学问！http://68n.shiruiyun.com
pc加拿大神测网28
2024-08-14 07:00:22 回复
以后就跟楼主混了！http://v136.xxfqjyh.com
6合必赢买法
2024-08-14 07:19:20 回复
楼主的帖子越来越有深度了！http://05lvh4.fjxfzl.com
蓝号计算公式杀四码
2024-08-14 16:22:21 回复
你觉得该怎么做呢？http://3canj.ytyufeng.cn
七乐彩综合版走势图
2024-08-14 21:10:32 回复
被楼主的逻辑打败了！http://uzdqc.imobive.com
怎么注册大发的最高邀请码
2024-08-15 16:23:15 回复
楼主看起来很有学问！http://u1pz2.funiankang1.com
大富豪网投平台有哪些
2024-08-15 23:16:15 回复
我就搞不明白了，看帖回帖能死人么，居然只有我这么认真的在回帖！http://7ln.antshopping.cn
香港内部马料
2024-08-16 07:00:30 回复
支持一下，下面的保持队形！http://0bk2pm.bengfashebei.com
游客
2024-08-17 13:01:13 回复
帖子很有深度！http://www.3553km.com
快盈lll平台
2024-08-19 16:09:01 回复
楼主加油，看好你哦！http://vud30.f0h5.com
章鱼飞艇精准计划网页版
2024-08-19 17:07:08 回复
大神就是大神，这么经典！http://m4cc5g.beicaikeji.com
大发云各个平台网址和邀请码是什么
2024-08-20 07:20:27 回复
在哪里跌倒，就在那里多爬一会儿！http://ukku.zhongshenghaitian.com
500实时数据
2024-08-20 11:33:58 回复
最近回了很多帖子，都没人理我！http://xctbs.lxhweld.cn
彩客网免费下载入口
2024-08-21 10:26:21 回复
这么版块的帖子越来越有深度了！http://rat.xinfalong.com.cn
大富豪官网赌场
2024-08-21 13:59:00 回复
写的太好啦，评论一个http://jehv.xameimei.com
3D预测号码最准最新推荐24年66期
2024-08-21 19:01:41 回复
收藏了，很不错的内容！http://ge3br8.dalianmoving.com
一分钟开奖一次赌大小的软件
2024-08-22 03:55:22 回复
收藏了，很不错的内容！http://yn5.m45b.com
新世纪投注网
2024-08-22 20:33:36 回复
楼主写的很经典！http://qjg.youjiaju.net
一起彩app正规吗
2024-08-23 11:15:50 回复
语言表达流畅，没有冗余，读起来很舒服。http://c3ec.xdgdzz.com
亚发网骗局
2024-08-25 16:18:19 回复
楼主的帖子实在是写得太好了。文笔流畅，修辞得体！http://n5lb3.wzlsrj.com
买足球外围安全吗
2024-08-27 09:41:30 回复
好好学习楼主的帖子！http://o5x.xinfalong.com.cn
亚盈体育官网首页
2024-08-30 00:43:23 回复
最近回了很多帖子，都没人理我！http://2cxfr.whlvying.com
彩独2苹果怎么没有了
2024-08-30 11:15:55 回复
听楼主一席话，省我十本书！http://ejq5.zcy-machinery.com
www.telegramis.com
2024-08-31 23:13:01 回复
缺乏激情了！http://lnikj.Telegram瀹樼綉
彩61大发3是不是真的
2024-09-02 10:38:41 回复
楼主今年多大了？http://afkabm.yinuoyiqi.com
游客
2024-09-03 05:59:29 回复
楼主的文笔不错！http://www.a5km.com/yxgl/jdqs/28340.html
百家app官方下载最新版
2024-09-03 09:18:13 回复
每天顶顶贴，一身轻松啊！http://1jhw.zzcjdq.cn
游客
2024-09-03 22:58:53 回复
今天的心情很不错啊http://www.a5km.com/yxgl/jdqs/26380.html
2024香港颁布了什么新法规
2024-09-04 14:24:20 回复
文章写太挺好了，真的值得推荐http://hji82g.hrw6.com
金沙8888js官方
2024-09-05 13:37:07 回复
每次看到楼主的帖子都有惊吓！http://zvpfnv.51kefubao.com
组六期期必中20注
2024-09-05 18:53:47 回复
刚分手，心情不好！http://3kts.sunic-corp.com
大发黄金版网页版
2024-09-06 15:19:02 回复
这个帖子会火的，鉴定完毕！http://vlg.zhaoapple.net
游客
2024-09-07 07:07:33 回复
顶！顶！顶！http://www.guangcexing.net/voddetail/mDVUYaxcGjx.html
游客
2024-09-07 23:18:21 回复
楼主该去看心理医生了！http://www.guangcexing.net/voddetail/DFHfwcGD.html
游客
2024-09-08 00:21:11 回复
楼主今年多大了？http://www.guangcexing.net/voddetail/kJQAMNBQQw.html
游客
2024-09-08 05:39:27 回复
楼主的头像是本人吗？http://www.guangcexing.net/voddetail/uuEESrSfw.html
游客
2024-09-08 08:27:36 回复
有机会找楼主好好聊聊！http://www.guangcexing.net/voddetail/TSkUnueBbhba.html
游客
2024-09-10 21:20:41 回复
听楼主一席话，省我十本书！http://bevf.xaqrpj.com.cn
游客
2024-09-15 19:34:01 回复
大神就是大神，这么经典！http://www.guangcexing.net/voddetail/qFBXKcGmRdaaJ.html
游客
2024-09-16 00:10:53 回复
看在楼主的面子上，认真回帖！http://www.guangcexing.net/voddetail/FkyGTTcebB.html
游客
2024-09-16 17:27:52 回复
看了这么多帖子，第一次看到这么高质量内容！http://www.guangcexing.net/tv/TquQhTtKjPvG.html
游客
2024-09-21 07:33:59 回复
这个帖子会火的，鉴定完毕！http://www.guangcexing.net/dvd/UvWPpatjHh.html
telegram中文版官网
2024-10-14 15:05:22 回复
刚分手，心情不好！https://www.telegramlp.com/
skype电脑版
2024-10-15 16:14:56 回复
白富美？高富帅？https://www.skypeis.com/
telegram中文版网站
2024-10-23 03:00:54 回复
楼上的别说的那么悲观好吧！https://www.telegramem.com/
skype电脑版登录
2024-11-13 08:22:32 回复
被楼主的逻辑打败了！https://www.skypeis.com/
skype官网
2024-11-15 23:18:03 回复
楼上的很有激情啊！https://www.skypeis.com/
本文已有70位网友发表了点评 - 欢迎您