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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
javascript基础知识讲解
Jan 11 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
js实现随机点名功能
2020/12/23 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
Python容器类型公共方法总结
2020/08/19 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
应届生服务员求职信
2013/10/31 职场文书
大学生的网络创业计划书
2013/12/26 职场文书
学校个人对照检查材料
2014/08/26 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
浅谈redis缓存在项目中的使用
2021/05/20 Redis
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL