自己写的一个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">
//这就是调用的地方了！自定义的东西很多，很多可以使用默认值的。
还有最重要的东西就是样式了，没有样式只有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;
}
这就是图片切换的所有代码了。如果有兴趣可以拿去用，无图无真相！上图: