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局部刷新页面时间具体实现
Jul 04 Javascript
jQuery中extend函数详解
Jul 13 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
jquery实现图片轮播器
May 23 jQuery
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
vue如何使用rem适配
Feb 06 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 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来写记数器(详细介绍)
2006/10/09 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
js 替换
2008/02/19 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
js实现ATM机存取款功能
2020/10/27 Javascript
Seajs源码详解分析
2019/04/02 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python里 super类的工作原理详解
2019/06/19 Python
django创建简单的页面响应实例教程
2019/09/06 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Python计算IV值的示例讲解
2020/02/28 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
python实现一个猜拳游戏
2020/04/05 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
新学期红领巾广播稿
2014/01/14 职场文书
保护环境的建议书
2014/03/12 职场文书
导航工程专业自荐信
2014/09/02 职场文书
甜品店创业计划书
2014/09/21 职场文书
购房个人委托书范本
2014/10/11 职场文书
党员作风建设整改方案
2014/10/27 职场文书