首先需要一个容器,设置它的overflow为hidden,position为relative;
容器里面还要一个滑动对象,设置它的position为absolute;
在initialize()函数里初始化一些属性。

在切换之前先执行Start()函数,进行相关设置,
主要是设置Index属性(索引)和_target属性(目标值):
文章来自 codego.net 请看源代码:
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;

接着就执行Move()函数开始移动了,原理通过设置滑动对象的top(或left)来做出移动的效果,
而减速的效果就需要执行GetStep()函数来获取步长:
文章来自 codego.net 请看源代码:
var iStep = (iTarget - iNow) / this.Step;用目标值减当前值再除以一个参数,得到步长,

这样取得的步长在当前值越接近目标值时会越来越小,也做成了减速的效果,
然后在top(或left)的设置中加上这个步长,并设置定时器继续Move(),直到到达目标值:
文章来自 codego.net 请看源代码:
this._slider,--codego.net--.style[style] = (iNow + iStep) + "px";
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);

下面例子里的容器结构:
文章来自 codego.net 请看源代码:
<div class="container" id="idTransformView">
<ul class="slider" id="idSlider">
<li><img src=""/></li>
<li><img src=""/></li>
<li><img src=""/></li>
</ul>
<ul class="num" id="idNum">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

要美观的话需要css设置一下: 
文章来自 codego.net 请看源代码:
.container, .container *{margin:0; padding:0;}

.container{width:408px; height:168px; overflow:hidden;}

.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;
}

样式的设置跟程序也有一定关系,例如宽和高,这里就不说明了。
接着就可以实例化了: 
文章来自 codego.net 请看源代码:
var tv = new TransformView ("idTransformView", "idSlider", 168, 3, {
onStart : function(){ Each(objs, function(o, i) { o.className = tv.Index == i ? "on" : ""; }) }//按钮样式
});

这里主要有4个参数,分别是容器对象、滑动对象、切换参数和切换数量。
当程序是上下切换时,切换参数切换的高度,当左右切换时,是切换的宽度。
切换数量就是有多少个切换对象了,例如上面的例子就是3个。
最后的参数是一些设置:
属性: 默认值//说明
Up: true,//是否向上(否则向左)
Step: 5,//滑动变化率
Time: 10,//滑动延时
Auto: true,//是否自动转换
Pause: 2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){}//完成转换时执行
例子里设置了onStart属性,作用是在切换开始时,设置按钮的样式

转载于:https://blog.51cto.com/8469910/1373984

this.Index = this._count - 1相关推荐

  1. elasticsearch使用jetty进行简单的权限控制

    默认elasticsearch是使用netty作为http的容器,由于netty并没有权限模块,所以默认es没有任何的权限控制,直接通过http就可以进行任何操作,除非把http禁用.但如果你使用el ...

  2. VC++取MD5算法记录下以后用得到(转)

    这个是网上扒下来的 作者已经无法知道是谁了 MD5.h 1 #ifndef MD5_H 2 #define MD5_H 3 4 #include <string> 5 #include & ...

  3. MD5 32位加密算法源码(测试通过)(系转载 飞扬天下)

    供自己学习使用 md5.h文件 #ifndef MD5_H #define MD5_H #include <string> #include <fstream> /* Type ...

  4. JavaScript 图片滑动切换效果

    序一(08/07/06) 看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧. 由于有了做图片滑动展示效果的经验,做这个就容易得多了. 序二(09/03/ ...

  5. C++实现md5加密或计算文件的唯一性识别

    由于网络上传了很多关于C++实现md5加密的类,至于那个是原创,我不敢妄加猜测,只是这里我声明我是转载的,并支持原创. 对于md5加密算法,我提供两文件: #ifndef MD5_H #define ...

  6. [JS]图片自动切换效果(学习笔记)

    上次在下载的网页中看到 javascript实现图片自动切换效果: <style text="text/css"> /*图片滚动栏*/ .container, .con ...

  7. JavaScript 图片切换展示效果

    JavaScript 图片切换展示效果 看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧. 由于有了做图片滑动展示效果的经验,做这个就容易得多了. 先看 ...

  8. C#基础复习(4) 之 浅析List、Dictionary

    参考资料 [1] .netCore 源码 https://github.com/dotnet/corefx [2] <Unity 3D脚本编程 使用C#语言开发跨平台游戏>陈嘉栋著 [3] ...

  9. c#的IList,IEnumerable和IEnumerator

    IList 是 ICollection 接口的子代,并且是所有非泛型列表的基接口.IList 实现有三种类别:只读.固定大小和可变大小.无法修改只读 IList.固定大小的 IList 不允许添加或移 ...

最新文章

  1. 重磅直播|光学3D测量技术原理及应用
  2. 位映射--解决大数据排序与排重问题
  3. 独家 | 手把手教你运用深度学习构建视频人脸识别模型(Python实现)
  4. 【整理】SYSCOMMAND的wParam值的宏定义
  5. [读书笔记]C#学习笔记七: C#4.0中微小改动-可选参数,泛型的可变性
  6. CobaltStrike使用
  7. SendMessage函数的常用消息及其应用大全
  8. java字符串学习_java之字符串学习记录
  9. 作者:郭鹏(1984-),男,博士,贵阳学院经济管理学院讲师。
  10. tortoiseGit的SHH秘钥设置
  11. 剑指offer-面试题6.重建二叉树
  12. maven:《Maven实战》读书笔记
  13. hibernate执行完查询操作后又执行许多更新操作
  14. 关于New Date()获取的不是当前电脑时间问题
  15. SLF4J: Failed toString() invocation on an object of type [com.zhao.guang.xiao.top.po.BlogBean$Hibern
  16. DxmCms自动过滤内容中的广告法违禁词功能
  17. 不用PyScript,网页端运行的Python编辑器
  18. LoadRunner11的安装、破解以及基本使用
  19. 进入BeOS的花花世界 系列九
  20. 睿智的目标检测31——非极大抑制NMS与Soft-NMS

热门文章

  1. python版本选择-【小白学python】之一:版本选择
  2. 解决opencv错误AttributeError: module ‘cv2.cv2‘ has no attribute ‘xfeatures2d‘
  3. LeetCode Validate Binary Search Tree(dfs)
  4. MySQL删除表数据
  5. Bitmap的使用(三)
  6. ASP.NET Web Pages:表单
  7. self.a 和 _a 的区别
  8. 实现磁贴的效果的一种方法
  9. Weblogic 集群部署说明 --转
  10. 迷难的北京行 – 2012.08.19