分享一个轮播图效果的封装

<!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=\"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>
<center><h1>Author:wyf</h1><p>2012/2/24</p></center>
<div id="box"></div>
</body>
</html>

最后编辑于：2017.11.27 03:59:34

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,734评论 6赞 505
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,931评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,133评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,532评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,585评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,462评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,262评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,153评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,587评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,792评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,919评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,635评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,237评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,855评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,983评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,048评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,864评论 2赞 354

分享一个轮播图效果的封装

推荐阅读更多精彩内容