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 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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判断linux下程序问题实例
2015/07/09 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
javascript 清除输入框中的数据
2009/04/13 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
python 命名规范知识点汇总
2020/02/14 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python对execl 处理操作代码
2020/06/22 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
考博专家推荐信模板
2013/12/02 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
铲车司机岗位职责
2014/03/15 职场文书
交通事故协议书
2014/04/15 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
干部考察材料范文
2014/12/24 职场文书
劳模先进事迹材料
2014/12/24 职场文书
特此通知格式
2015/04/27 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书