原生javascript图片自动或手动切换示例附演示源码


Posted in Javascript onSeptember 04, 2013

一、效果图
原生javascript图片自动或手动切换示例附演示源码 
二、html代码

<style type="text/css"> 
.container, .container *{margin:0; padding:0;} .container{width:408px; height:168px; overflow:hidden;position:relative;} 
.slider{position:absolute;} 
.slider li{ list-style:none;display:inline;} 
.slider img{ width:408px; height:168px; display:block;} 
.slider2{width:2000px;} 
.slider2 li{float:left;} 
.num{ position:absolute; right:5px; bottom:5px;} 
.num li{ 
float: left; 
color: #FF7300; 
text-align: center; 
line-height: 16px; 
width: 16px; 
height: 16px; 
font-family: Arial; 
font-size: 12px; 
cursor: pointer; 
overflow: hidden; 
margin: 3px 1px; 
border: 1px solid #FF7300; 
background-color: #fff; 
} 
.num li.on{ 
color: #fff; 
line-height: 21px; 
width: 21px; 
height: 21px; 
font-size: 16px; 
margin: 0 1px; 
border: 0; 
background-color: #FF7300; 
font-weight: bold; 
} 
</style> 
<div class="container" id="idTransformView2"> 
<ul class="slider slider2" id="idSlider2"> 
<li><img src="images/01.jpg"/></li> 
<li><img src="images/02.jpg"/></li> 
<li><img src="images/03.jpg"/></li> 
</ul> 
<ul class="num" id="idNum2"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</div>

三、源代码
var $ = function (id) { 
return "string" == typeof id ? document.getElementById(id) : id; 
}; var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this, arguments); 
} 
} 
} 
Object.extend = function(destination, source) { 
for (var property in source) { 
destination[property] = source[property]; 
} 
return destination; 
} 
var TransformView = Class.create(); 
TransformView.prototype = { 
//容器对象,滑动对象,切换参数,切换数量 
initialize: function(container, slider, parameter, count, options) { 
if(parameter <= 0 || count <= 0) return; 
var oContainer = $(container), oSlider = $(slider), oThis = this; 
this.Index = 0;//当前索引 
this._timer = null;//定时器 
this._slider = oSlider;//滑动对象 
this._parameter = parameter;//切换参数 
this._count = count || 0;//切换数量 
this._target = 0;//目标参数 
this.SetOptions(options); 
this.Up = !!this.options.Up; 
this.Step = Math.abs(this.options.Step); 
this.Time = Math.abs(this.options.Time); 
this.Auto = !!this.options.Auto; 
this.Pause = Math.abs(this.options.Pause); 
this.onStart = this.options.onStart; 
this.onFinish = this.options.onFinish; 
oContainer.style.overflow = "hidden"; 
oContainer.style.position = "relative"; 
oSlider.style.position = "absolute"; 
oSlider.style.top = oSlider.style.left = 0; 
}, 
//设置默认属性 
SetOptions: function(options) { 
this.options = {//默认值 
Up: true,//是否向上(否则向左) 
Step: 5,//滑动变化率 
Time: 10,//滑动延时 
Auto: true,//是否自动转换 
Pause: 2000,//停顿时间(Auto为true时有效) 
onStart: function(){},//开始转换时执行 
onFinish: function(){}//完成转换时执行 
}; 
Object.extend(this.options, options || {}); 
}, 
//开始切换设置 
Start: function() { 
if(this.Index < 0){ 
this.Index = this._count - 1; 
} else if (this.Index >= this._count){ this.Index = 0; } 
this._target = -1 * this._parameter * this.Index; 
this.onStart(); 
this.Move(); 
}, 
//移动 
Move: function() { 
clearTimeout(this._timer); 
var oThis = this, style = this.Up ? "top" : "left", 
iNow = parseInt(this._slider.style[style]) || 0, 
iStep = this.GetStep(this._target, iNow); 
if (iStep != 0) { 
this._slider.style[style] = (iNow + iStep) + "px"; 
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); 
} else { 
this._slider.style[style] = this._target + "px"; 
this.onFinish(); 
if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); } 
} 
}, 
//获取步长 
GetStep: function(iTarget, iNow) { 
var iStep = (iTarget - iNow) / this.Step; 
if (iStep == 0) return 0; 
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1); 
return iStep; 
}, 
//停止 
Stop: function(iTarget, iNow) { 
clearTimeout(this._timer); 
this._slider.style[this.Up ? "top" : "left"] = this._target + "px"; 
} 
}; 
window.onload=function(){ 
function Each(list, fun){ 
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } 
}; 
var objs = $("idNum2").getElementsByTagName("li"); 
var tv = new TransformView("idTransformView2", "idSlider2", 408, 3, { 
onStart: function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) },//按钮样式 
Up: false 
}); 
tv.Start(); 
Each(objs, function(o, i){ 
o.onmouseover = function(){ 
o.className = "on"; 
tv.Auto = false; 
tv.Index = i; 
tv.Start(); 
} 
o.onmouseout = function(){ 
o.className = ""; 
tv.Auto = true; 
tv.Start(); 
} 
}) 
}

一看就名目了然了,所以就不细讲解代码!
演示及源文件下载
Javascript 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
js 窗口抖动示例
Sep 04 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 #Javascript
jQuery遍历Form示例代码
Sep 03 #Javascript
JS将秒换成时分秒实现代码
Sep 03 #Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 #Javascript
js综合应用实例简单的表格统计
Sep 03 #Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 #Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 #Javascript
You might like
CodeIgniter视图使用注意事项
2016/01/20 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
浅谈Python协程
2020/06/17 Python
python 制作网站小说下载器
2021/02/20 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
社区优秀志愿者材料
2014/02/02 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
干部下基层实施方案
2014/03/14 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers