javascript面向对象编程类似tab的轮播图片
- <!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>
- div,ul,li{ list-style:none; margin:0; padding:0;}
- img{ border:none;}
- .slider{ width:634px; height:230px; overflow:hidden; margin:50px auto 0; position:relative;}
- .imgMarquee{ position:absolute; left:0; top:0; z-index:10;}
- .list{ position:absolute; z-index:100; top:200px; right:20px;}
- .list li{ float:left; display:inline; width:24px; height:20px; overflow:hidden; border:1px solid #F66; margin:0 4px; color:#fff; font-size:20px; line-height:20px; text-align:center;
- background:#969;}
- .list li.current{ font-size:22px; height:22px; line-height:22px; background:red;}
- </style>
- <script src="base.js"></script>
- </head>
- <body>
- <div class="slider" id="slider">
- <div class="imgMarquee">
- <img src="01.jpg" width="630" height="230" class="timg"/>
- <img src="02.jpg" width="634" height="230" class="timg"/>
- <img src="03.gif" width="634" height="230" class="timg"/>
- </div>
- <ul class="list">
- <li class="plist">1</li>
- <li class="plist">2</li>
- <li class="plist">3</li>
- </ul>
- </div>
- <script src="index.js"></script>
- <script type="text/javascript">
- var imgWrap = getElementsByClassName("timg"),
- lists = getElementsByClassName("plist"),
- slider = document.getElementById("slider");
- var test = new Marquee({imgWrap : imgWrap,lists : lists,slider : slider});
- test.Start();
- </script>
- </body>
- </html>
base.js
- 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;
- }
- function addClass(obj,className){
- obj.className+=" " +className;
- return obj;
- }
- function delClass(obj,className){
- var s = obj.className.split(/\s+/);//正则把类名分开
- for(var i=0;i<s.length;i++){
- if(s[i]==className){
- delete s[i];
- }
- }
- obj.className = s.join(" ");
- return obj;
- }
- function addEvent(obj,type,fn,status){
- if(obj.addEventListener){
- obj.addEventListener(type,fn,false);
- }else{
- obj.attachEvent("on"+type,function(){
- fn.call(obj);
- })
- }
- }
js
- // JavaScript Document
- function Marquee(config){
- this.imgWrap = config.imgWrap;
- this.lists = config.lists;
- this.slider = config.slider;
- this.playTime = config.playTime || 3000;
- this.currentIndex = 0;
- this.currentClass = config.currentClass || "current";
- this.lists[0].className +=" " +this.currentClass;
- var t;
- var that = this;
- for(var t=0;t<this.lists.length;t++){
- this.lists[t]._index = t;
- addEvent(this.lists[t],'mouseover',function(){
- that.showItem(this._index);
- this.currentIndex = this._index;
- })
- }
- this.slider.onmouseover = function(){
- that.Stop();
- }
- this.slider.onmouseout = function(){
- that.Start();
- }
- }
- Marquee.prototype = {
- Start : function(){
- var that = this;
- t = setInterval(function(){
- that.PlayNext();
- },this.playTime);
- },
- PlayNext : function(){
- if(this.currentIndex >= this.lists.length){
- this.currentIndex = 0;
- }
- this.showItem(this.currentIndex);
- this.currentIndex++;
- },
- Stop : function(){
- clearInterval(t);
- },
- showItem : function(n){
- for(var i=0;i<this.imgWrap.length;i++){
- this.imgWrap[i].style.display = "none";
- }
- this.clearClass();
- addClass(this.lists[n],this.currentClass);
- this.imgWrap[n].style.display = "block";
- },
- clearClass : function(){
- for(var k=0;k<this.lists.length;k++){
- if(hasClass(this.lists[k],this.currentClass)){
- delClass(this.lists[k],this.currentClass);
- }
- }
- }
- }