自己写的一个javascript首页图片切换组件

      在平时做网站的过程中，最常用的一个组件就是首页的图片切换，网上有很多可以下载的Flash插件，jquery插件，但是有时又很难找到适合自己的，有时候是不是想自己动手写个组件？ 那样以后有什么自己个性的功能好自定义。怀着这样的心理我也开始动手写了自己的一个js组件，不依赖任何库，最原生的js语法，里面少量的用了一些js高级属性：闭包。希望对js初学者有一定的帮助，代码写的不好也希望大家能指出更正。谢谢。

 

/**

*  定义一个生成类模板，生成的类，

*  每次实例化后自动调用init方法

*/

var Class = window.Class = {

create: function() {

function kclass(obj) {

if(this.init){

this.init(obj); 

};

}

kclass.prototype.constructor = kclass;

return kclass;

},

emptyFn:function(){}

}

 

/*** 类的继承方法 ***/

Object.extend = function(destination, source) {

for (var property in source) {

   destination[property] = source[property];

}

return destination;

};

 

/**

* 绑定函数到一个指定对象***********

*/

Function.prototype.bind = function() {

 

if (arguments.length < 2 && arguments[0] === undefined) return this;

var __method = this, args = $A(arguments), object = args.shift();

return function() {

return __method.apply(object, args.concat($A(arguments)));

}

}

 

以上是prototype框架里常用的一些基础方法，个人觉得很好，就拿来使用了^_^!

 

/**定义一个名字，类似于jQuery的jQuery、$ 变量，写自己的js框架最好是这样

  *全局只有一个你定义的变量，因为全局变量越少越好！

  */

var Lcy = window.Lcy = {};

 

//以下就是实现的主要代码了，一坨一坨的，希望大家能耐心看。呵呵

 

 

/**

* @author liuchuanyang

* @Date 2012-6-7 

* @首页图片切换

*/

Lcy.PicViewTrans = Class.create();

 

Lcy.PicViewTrans.prototype = {

    constructor : Lcy.PicViewTrans,

    init : function(option) { //初始化方法，类似于java类的构造函数

        var opts = this._opts = Object.extend(this.defaults, option||{});

        if(!opts.target) {

            return;

        }

 

        this._element = typeof opts.target == 'string' ? document.getElementById(opts.target) : opts.target;

        var uls = this._element.getElementsByTagName("ul");

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

            if(uls[i].className === 'slider') {

                this._slider = uls[i];

                break;

            }

        }

 

        if(!this._slider) {

            return;

        }

 

        this._opts.index = 0;    //当前图片索引

        this._opts.count = this._slider.getElementsByTagName("li").length; //切换图总数

 

        //alert("opts.direct : " + opts.direct);

        if(opts.direct === 'left' || opts.direct === 'right') {

            this._slider.style.width = parseInt(this._element.offsetWidth) * opts.count + 100 + "px";

        } else if(opts.direct === 'up' || opts.direct === 'down') {

            //alert("up or down");

            this._slider.style.width = parseInt(this._element.offsetWidth) + "px";

        }

 

        var lis = this._slider.getElementsByTagName("li");

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

            lis[i].style.width = parseInt(this._element.offsetWidth) + "px";

            lis[i].style.height = parseInt(this._element.offsetHeight) + "px";

 

            if(opts.fit) {

                var img = lis[i].getElementsByTagName("img")[0];

                img.style.width = parseInt(this._element.offsetWidth) + "px";

                img.style.height = parseInt(this._element.offsetHeight) + "px";

            }

        }

 

        //创建分页，就是图片切换右下角的1,2,3,4,5数字了

        var ulObj = document.createElement("ul");

        var pages = new Array();

        ulObj.className = "num";        

        for(i = 0; i < opts.count; i++) {

            var liObj = document.createElement("li");

            liObj.innerHTML = i+1;

            ulObj.appendChild(liObj);

            pages.push(liObj);

 

            //liObj.onmouseover = this.start.bind(this);

            liObj.onmouseover = function(t){

                var idx = i;

                var that = t; //这样写var that = this,为错！因为匿名函数又绑定到全局了.注意！this变了

                return function(){

                    clearTimeout(that._timer);

                    that._opts.index = idx;

                    that.start();

                }

            }(this);

        }

        this._element.appendChild(ulObj);

        this._pages = pages;

 

        this.start();

 

    },

 

    //每次切换前的准备,包括： 转移到哪位图,目标位置。

    start : function() {

 

        var opts = this._opts;

        if(opts.index >= opts.count || opts.index < 0) {

            opts.index = 0;

        }

 

        //更改分页page 样式

        this.changePageStyle();

 

        opts.targetPos = 0; //本次切换图片的最终位置

        if(opts.direct === 'left' || opts.direct === 'right') {

            opts.targetPos = -1*this._element.offsetWidth * opts.index;

        } else if(opts.direct === 'up' || opts.direct === 'down') {

            opts.targetPos = -1*this._element.offsetHeight * opts.index;

        }

 

        //执行用户自定义函数

        if(typeof this._opts.changeStart == 'function') {

            this._opts.changeStart();

        }

 

        this._timer = setTimeout(this.move.bind(this), opts.time);

 

    },

 

    move : function() {     //

        var opts = this._opts;

        clearTimeout(this._timer);

        var curPos = 0;     //当前位置

        var style = '';

        if(opts.direct === 'left' || opts.direct === 'right') {

            style = "left"

        } else if(opts.direct === 'up' || opts.direct === 'down') {

            style = "top";

        }

        curPos = parseInt(this._slider.style[style]) || 0;

 

        var iStep = getStep(opts.targetPos, curPos);

        if(iStep != 0) {    //还在移动  

            this._slider.style[style] = (curPos + iStep) + "px";

            this._timer = setTimeout(this.move.bind(this), opts.time);

        } else { //本次切换已经完成

            //alert(this.targetPos);

            if(typeof this._opts.changeStop == 'function') {

                this._opts.changeStop();

            }

            this._slider.style[style] = this._opts.targetPos + "px";

            opts.index++;

            if(opts.auto) {

                this._timer = setTimeout(this.start.bind(this), opts.pause);

            }

        }

 

        //获得一次移动的距离

        function getStep(iTargetPos, iCurPos) {

            var istep = (iTargetPos - iCurPos) / opts.step;

 

            if(istep == 0) return 0;

            if(Math.abs(istep) < 1) {

                return istep > 0 ? 1 : -1;

                //return 0;

            }            

            return istep;

        }

 

    },

 

    stop : function() {

 

    },

 

    changePageStyle : function() {

        var opts = this._opts;

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

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

        }

        this._pages[opts.index].className = "current";

    },

 

 

    //图片切换默认属性

    defaults: {

        direct:'left',      //图片滑动方向. left-向左, right-向右, up-向上, down-向下

        fit: false,         //图片长宽是否强制适合窗口大小

        auto: true,         //是否自动切换

        pause: 2000,        //停顿时间(auto为true有效)

        step: 5,            //滑动变化速度

        time: 10,           //滑动延时

        changeStart: function(){},  //开始转换时执行

        changeStop:function(){}     //完成转换时执行

    }

}

 

 

以上是实现代码了，下面就是使用了！

<!-- html页面上需要图片切换的地方，aaa.jpg/bbb.jpg/ddd.jpg三张图片切换 -->

 

<div class="container" id="container">

    <ul class="slider">

        <li><a href="http://www.youll.cn" target="_blank"><img src="aaa.jpg"/></a></li>

        <li><a href="http://www.youll.cn" target="_blank"><img src="bbb.jpg"/></a></li>

        <li><a href="http://www.youll.cn" target="_blank"><img src="ddd.jpg"/></a></li>

    </ul>

</div>

 

<script language="javascript">

//这就是调用的地方了！自定义的东西很多，很多可以使用默认值的。

 

new Lcy.PicViewTrans({

        target : 'container',

        fit: true,

        direct: 'left',

        step: 10,            //滑动变化速度

        time: 10,            //滑动延时

        changeStart: function() {

            //alert(111);

        },

        changeStop: function(){

            //alert(222);

        }

    });

</script>

 

还有最重要的东西就是样式了，没有样式只有js也是白搭哦。

 

/** 首页图片切换 **/

.container, .container *{margin:0; padding:0;}

.container {width:510px; height:300px; overflow:hidden;position:relative;float:left;z-index:1}

.container ul.slider{position:absolute;width:2000px;}

.container ul.slider li{ list-style:none;float:left;display:inline;width:408px; height:168px;}

.container ul.slider li a img{border:none;}

.container .num{ position:absolute; right:5px; bottom:5px;}

.container .num li{

    float: left;

    text-align: center;

    cursor: pointer;

    overflow: hidden;

    margin: 3px 2px;

    background-color: #fff;

    width: 20px;

    height: 20px;

    line-height:20px;

    border-radius: 20px;

    color: #DE7D4B;

    display: list-item;

    font-family: tahoma, arial;

    font-size: 13px;

 

    /*透明度-兼容所有浏览器*/

    filter:alpha(opacity=70);  

    -moz-opacity:0.7;

    -khtml-opacity: 0.7;

    opacity: 0.7;

}

.container .num li.current{

    color: #fff;

    border: 0;

    font-weight: bold;

    background-color: #F60;

    color: white;

    filter: none;

    font-weight: bold;

 

    /*透明度-兼容所有浏览器*/

    filter:alpha(opacity=100);  

    -moz-opacity:1;

    -khtml-opacity: 1;  

    opacity: 1;

}

 

这就是图片切换的所有代码了。如果有兴趣可以拿去用，无图无真相！上图:

 

 

 

 

评论

2 楼 lcyangily 2012-08-23  

haibin_gl 写道

不错，图片是自己处理的么？

图片是随便下的，如果想看使用效果可以到这里 http://www.youll.cn

1 楼 haibin_gl 2012-08-23  

不错，图片是自己处理的么？