JavaScript实现图片滑动切换的代码示例分享


Posted in Javascript onMarch 06, 2016

假设我们这里有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);
 }
};
Javascript 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 #Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 #Javascript
JavaScript模拟数组合并concat
Mar 06 #Javascript
JavaScript模拟push
Mar 06 #Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 #Javascript
Node.js模块封装及使用方法
Mar 06 #Javascript
JavaScript中三种异步上传文件方式
Mar 06 #Javascript
You might like
基于php伪静态的实现详细介绍
2013/04/28 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
php的socket编程详解
2016/11/20 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
PHP7新特性
2021/03/09 PHP
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
javascript实现评分功能
2020/06/24 Javascript
js实现筛选功能
2020/11/24 Javascript
python连接MySQL数据库实例分析
2015/05/12 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
python实现PID算法及测试的例子
2019/08/08 Python
python多进程重复加载的解决方式
2019/12/13 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
小学运动会表扬稿
2014/01/19 职场文书
学子宴答谢词
2014/01/25 职场文书
法人委托书范本
2014/09/15 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
2014年食堂工作总结
2014/11/20 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书