天天看点
返回

Javascript面向对象写轮播效果

今天学习了下  用javascript面向对象编程写轮播效果 上篇文章也是用javascript写轮播效果 但是感觉上代码很乱 所以今天也学习了下用面向对象编程写轮播效果！通用的写法是 先定义一个类 也就是构造函数！function Player(){},这样一个构造函数！定于相应的属性保存在此构造函数内，调用的方式是new Player()这样调用，但是我们都知道 每当实例化一个对象时候 那么有相对应的一个指针指向了一个prototype，构造函数和prototype没有任何关系 只有对象的实例一个指针指向了prototype！所以我们可以把所有的方法都保存在prototype中 ，有start（）轮播方法 ，Stop（）停止方法，invoke（）切换相应的位置的方法 但是这两个方法我们可以放在构造函数里面写 初始化下！你暂时这么多方法，构造函数参数有：hoverClass，lists,scrollImg,outTime,imageHeight 等！下面的代码：

<!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>无标题文档</title> 

<style> 

ul,li{ list-style:none;} 

.scrollImg{ width:400px; height:900px; position:absolute; top:0; left:0;} 

.scrollImg a{ width:400px; height:300px; overflow:hidden; display:block;} 

.scrollImg img{ border:none;} 

.ScrollWrap{ width:400px; height:300px; overflow:hidden;margin:50px auto 0; position:relative;} 

.lists{ height:20px; position:absolute; top:255px; right:10px; z-index:100;*top:270px;} 

.lists li{ width:20px; height:20px; border:1px solid orange; background:#fff; float:left; margin-right:4px; display:inline; text-align:center; line-height:20px; color:orange; cursor:pointer; font-weight:700;} 

.lists li.current{ height:24px; line-height:24px; background:orange; color:#fff; width:24px; margin-top:-2px;} 

</style> 

<script src="base.js" type="text/javascript"></script> 

</head> 

<body> 

    <div class="ScrollWrap"> 

        <div class="scrollImg"> 

            <a href="#"><img  src="image/01.jpg" width="400" height="300"/></a> 

            <a href="#"><img  src="image/02.jpg" width="400" height="300"/></a> 

            <a href="#"><img  src="image/03.jpg" width="400" height="300"/></a> 

        </div> 

        <ul class="lists"> 

            <li>1</li> 

            <li>2</li> 

            <li>3</li> 

        </ul> 

    </div> 

<script type="text/javascript" src="object.js"></script> 

<script> 

   var lists = getElementsByClassName("lists")[0].getElementsByTagName("li"), 

       scrollImg = getElementsByClassName("scrollImg")[0]; 

   var s = new Player(lists,scrollImg,undefined,3000,300); 

   s.Start(); 

   //s.invoke(1); 

</script> 

</body> 

</html> 

function getElementsByClassName(className,context){ 

        context = context || document; 

        if(context.getElementsByClassName){ 

            return context.getElementsByClassName(className);    

        } 

        var nodes = context.getElementsByTagName("*"),ret=[];//获取页面上的所有节点 

        for(var i=0;i<nodes.length;i++){   //遍历所有的节点 

            if(hasClass(nodes[i],className)) ret.push(nodes[i]); 

        }    

        return ret; 

    } 

//检查有没有类 

function hasClass(node,className){ 

    var names = node.className.split(/\s+/);//正则表达式所有的类名用空格分开    

    //遍历这个类名 

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

        if(names[i]==className) 

            return true;     

        return false;    

/** 

参数说明 

curTime 当前时间 即动画已经进行了多长时间 开始时间为0 

start : 开始值 

dur : 动画持续多长时间 

alter : 总的变化量 

*/ 

function animate(o,start,alter,dur,fx){ 

    var curTime=0; 

    var t = setInterval(function(){ 

        if(curTime>=dur) clearInterval(t); 

        for(var i in start){ 

            o.style[i] = fx(start[i],alter[i],curTime,dur) + "px";   

        curTime+=50; 

    },50)    

    return function(){ 

        clearInterval(t);    

    }; 

} 

function Linear(start,alter,curTime,dur){ 

    return start + curTime/dur * alter;  

    //最简单的线性变化 即匀速运动     

//加速运动 

function Quad(start,alter,curTime,dur){ 

    return start + Math.pow(curTime/dur,2)*alter;    

// JavaScript Document 

/**  

面向对象封装轮播器 

lists 轮播按钮 

scrollImg 要轮播的内容 

hoverClass  鼠标类 默认情况下是current 

outTime 轮播间隔 

imageHeight 要轮播的图片高度 

function Player(lists,scrollImg,hoverClass,outTime,imageHeight){ 

    hoverClass = hoverClass || "current"; 

    outTime = outTime || 3000; 

    this.lists = lists; 

    this.scrollImg = scrollImg; 

    this.hoverClass = hoverClass; 

    this.outTime = outTime; 

    this.imageHeight = imageHeight; 

    this.curItem =lists[0];  //初始化当前帧 

    //this.curItem.index = 0;  //初始化当前帧的值 

    this.invoke(0); 

    var _this = this; 

    for(var i=0;i<this.lists.length;i++){ 

        this.lists[i].onmouseover = function(){ 

            _this.Stop(); 

            _this.invoke(this.index); 

        }; 

        this.lists[i].onmouseout = function(){ 

            _this.Start(); 

        this.lists[i].index = i; 

/* start是开始播放函数 stop是结束函数 invoke是切换到哪里的函数 */ 

Player.prototype = { 

    Start : function(){ 

        var _this = this; 

        this.Stop(); 

        this.interval = setInterval(function(){ 

            _this.next();    

        },this.outTime); 

    }, 

    invoke : function(n){ 

        //具体显示那一帧 

        this.curItem = this.lists[n]; 

        //this.curItem.index = n; 

        var top = parseInt(this.scrollImg.style.top) || 0; 

        this.animateInterval && this.animateInterval(); 

        this.animateInterval = animate(this.scrollImg,{top:top},{top:(-n*this.imageHeight)-top},500,Quad); 

        //this.scrollImg.style.top = -n*300 + "px"; 

        this.recovery(); 

        this.curItem.className = this.hoverClass; 

    Stop : function(){ 

        clearInterval(this.interval); 

    next : function(){ 

        //这个函数是说明是下一帧 那么我们应该求出当前针. 

        var nextIndex = this.curItem.index + 1; 

        if(nextIndex >= this.lists.length){ 

            nextIndex = 0;   

        this.invoke(nextIndex); 

    recovery : function(){ 

        for(var i=0;i<this.lists.length;i++){ 

            this.lists[i].className = "";    

    }    

代码有相应的注释 恩下面也有相应的下载 不明白的地方可以留言

<a href="http://down.51cto.com/data/2359606" target="_blank">附件：http://down.51cto.com/data/2359606</a>

本文转自 涂根华 51CTO博客，原文链接：http://blog.51cto.com/tugenhua/757103，如需转载请自行联系原作者

javascript 前端开发 纯java script 学习java script this 纯java script调用 纯java script功能 java面向对象this
上一篇: 命令模式/Command
下一篇: Jquery 3D效果

继续阅读