? ? ? 在平时做网站的过程中，最常用的一个组件就是首页的图片切换，网上有很多可以下载的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">
//这就是调用的地方了！自定义的东西很多，很多可以使用默认值的。
?
?
还有最重要的东西就是样式了，没有样式只有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;
}
?
这就是图片切换的所有代码了。如果有兴趣可以拿去用，无图无真相！上图:
?
?
?
?
图片是随便下的，如果想看使用效果可以到这里 http://www.youll.cn