这篇文章主要介绍了 JavaScript 实现图片滑动切换的代码示例分享, 能够控制包括滑动时间和切换数量等, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
假设我们这里有 1 到 5 五张 bmp 图片,那么控制图片切换显示的核心代码可以为:
- <script>
- var i=1;
- var img = new Array();
- img[0] = "1.bmp";
- img[1] = "2.bmp";
- img[2] = "3.bmp";
- img[3] = "4.bmp";
- img[4] = "5.bmp";
- function playImg(){
- i=i+1;
- var imgs = document.getElementById("img");
- imgs.src =img[i];
- if(i>=4){
- i=1;
- }
- }
- window.onload = function(){
- document.getElementById("img").src="1.bmp";
- }
- </script>
- <img id="img" src="" width="500" hieght="500" onclick="playImg()" style="cursor:pointer;">
主要体现了一个图片的切换控制思路,可以用于各种场景,那么下面我们来看一个复杂一些的实现,能够控制滑动和停顿事件等具体的实现图片的滑动切换效果的例子:
- var $$ = function(id) {
- return "string" == typeof id ? document.getElementById(id) : id;
- };
- var Extend = function(destination, source) {
- for (var property in source) {
- destination[property] = source[property];
- }
- return destination;
- }
- var CurrentStyle = function(element) {
- return element.currentStyle || document.defaultView.getComputedStyle(element, null);
- }
- var Bind = function(object, fun) {
- var args = Array.prototype.slice.call(arguments).slice(2);
- return function() {
- return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
- }
- }
- var forEach = function(array, callback, thisObject) {
- if (array.forEach) {
- array.forEach(callback, thisObject);
- } else {
- for (var i = 0,
- len = array.length; i < len; i++) {
- callback.call(thisObject, array[i], i, array);
- }
- }
- }
- var Tween = {
- Quart: {
- easeOut: function(t, b, c, d) {
- return - c * ((t = t / d - 1) * t * t * t - 1) + b;
- }
- },
- Back: {
- easeOut: function(t, b, c, d, s) {
- if (s == undefined) s = 1.70158;
- return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
- }
- },
- Bounce: {
- easeOut: function(t, b, c, d) {
- if ((t /= d) < (1 / 2.75)) {
- return c * (7.5625 * t * t) + b;
- } else if (t < (2 / 2.75)) {
- return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
- } else if (t < (2.5 / 2.75)) {
- return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
- } else {
- return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
- }
- }
- }
- }
- //容器对象,滑动对象,切换数量
- var SlideTrans = function(container, slider, count, options) {
- this._slider = (slider);
- this.container = (container); //容器对象
- this._timer = null; //定时器
- this._count = Math.abs(count); //切换数量
- this._target = 0; //目标值
- this._t = this._b = this._c = 0; //tween参数
- this.Index = 0; //当前索引
- this.SetOptions(options);
- this.Auto = !!this.options.Auto;
- this.Duration = Math.abs(this.options.Duration);
- this.Time = Math.abs(this.options.Time);
- this.Pause = Math.abs(this.options.Pause);
- this.Tween = this.options.Tween;
- this.onStart = this.options.onStart;
- this.onFinish = this.options.onFinish;
- var bVertical = !!this.options.Vertical;
- this._CSS = bVertical ? "top": "left"; //方向
- //样式设置
- var p = CurrentStyle(this._container).position;
- p == "relative" || p == "absolute" || (this._container.style.position = "relative");
- this._container.style.overflow = "hidden";
- this._slider.style.position = "absolute";
- this.Change = this.options.Change ? this.options.Change: this._slider[bVertical ? "offsetHeight": "offsetWidth"] / this._count;
- };
- SlideTrans.prototype = {
- //设置默认属性
- SetOptions: function(options) {
- this.options = { //默认值
- Vertical: true,
- //是否垂直方向(方向不能改)
- Auto: true,
- //是否自动
- Change: 0,
- //改变量
- Duration: 30,
- //滑动持续时间
- Time: 10,
- //滑动延时
- Pause: 3000,
- //停顿时间(Auto为true时有效)
- onStart: function() {},
- //开始转换时执行
- onFinish: function() {},
- //完成转换时执行
- Tween: Tween.Quart.easeOut //tween算子
- };
- Extend(this.options, options || {});
- },
- //开始切换
- Run: function(index) {
- //修正index
- index == undefined && (index = this.Index);
- index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
- //设置参数
- this._target = -Math.abs(this.Change) * (this.Index = index);
- this._t = 0;
- this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top": "left"]);
- this._c = this._target - this._b;
- this.onStart();
- this.Move();
- },
- //移动
- Move: function() {
- clearTimeout(this._timer);
- //未到达目标继续移动否则进行下一次滑动
- if (this._c && this._t < this.Duration) {
- this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
- this._timer = setTimeout(Bind(this, this.Move), this.Time);
- } else {
- this.MoveTo(this._target);
- this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
- }
- },
- //移动到
- MoveTo: function(i) {
- this._slider.style[this._css] = i + "px";
- },
- //下一个
- Next: function() {
- this.Run(++this.Index);
- },
- //上一个
- Previous: function() {
- this.Run(--this.Index);
- },
- //停止
- Stop: function() {
- clearTimeout(this._timer);
- this.MoveTo(this._target);
- }
- };
来源: http://www.phperz.com/article/17/0216/266808.html