原生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 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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
Function eregi is deprecated (解决方法)
2013/06/21 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
Python内置函数OCT详解
2016/11/09 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
音乐教学案例
2014/01/30 职场文书
局火灾防控工作方案
2014/05/25 职场文书
消防宣传标语大全
2015/08/03 职场文书
高中体育课教学反思
2016/02/16 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
浅谈python中的多态
2021/06/15 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB