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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
webpack之devtool详解
Feb 10 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
使用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读取IMAP邮件
2006/10/09 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
JS实现打字游戏
2019/12/17 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
2014幼儿园教师个人工作总结
2014/11/08 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers