javascript 另一种图片滚动切换效果思路


Posted in Javascript onApril 20, 2012

先说一种最普遍的思路:

把图片们用ul之类的包起来,并设置float。然后设置这个ul本身为absolute定位,其父标签用relative定位。通过设置ul的left或top值,实现图片队列的滚动效果

特点:

只操作一个html元素(即上文的ul),对系统开销小;滚到头会回滚;从大序号滚动到小序号也会回滚;从最后序号滚动到第一个,会“咻”的一下把所有中间的图片也路过一次。

另一种思路就是我在XScroll.js里实现的思路,所有图片用绝对定位。具体看那篇文章吧。

XScroll.js完成后,我始终觉得他的系统消耗是个问题,因为他实现一个图片切换基本上都是同时操作两张图片。所以我想写一个精简版的,但又不想要我文首说那种最普通的。

后来我无意在土豆女性频道发现了另一种图片滚动切换的实现思路。

他的特点是:

无论从哪个序号跳到哪个序号,都只滚动一个步长。比如从1到2,或从1跳到到3,都只滚动一个步长。即使中间有其他图片,也不会出现;当然,滚到头也会回滚,但回滚也是只有一个步长。

这个效果看起来很奇妙,我研究了一下他的html,发现实现方式比我的XScroll.js要简便的多。

<ul id="idSlider2"> 
<li style=""><a href="http://office.3water.com/"><img src="../s1.jpg"/></a></li> 
<li><a href="http://3water.com/"><img src="../s2.jpg"/></a></li> 
<li><a href="http://baidu.com/"><img src="../s3.jpg"/></a></li> 
<li><a href="http://sc.3water.com/"><img src="../s4.jpg"/></a></li> 
</ul>

html结构,很普通;前面的定位跟最普遍的那个思路一样,都是所有图片均设置float:left。但JS里面有蹊跷:只设置当前图片为显示,其余图片隐藏,当要滚动时,显示出下一张图片,并判断下一张图片是在当前图片前面还是后面:在后面就往左滚,在前面就回滚。

由于所有图片都设置了float,所以当任意两张图片显示出来的时候,他们会因为float的原因紧紧靠在一起,这样,就不用额外担心图片的定位问题了。

而且,这样一来,也只用操作图片容器(即那个ul),而不用操作单张图片,节省系统资源。

我觉得这种思路很妙,简单大气又节约,所以我写了一个XScroll2.js,来记录这个效果,感觉还很不错哈。

有兴趣的朋友可以看XScroll2.js的示例页,仿的是拍拍网首页的图片切换——因为他的效果也是上面说的这种。不过不知道能坚持看到文末的同学有多少呢。。。

Javascript 相关文章推荐
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
javascript动态加载二
Aug 22 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 #Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 #Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 #Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 #Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 #Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 #Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 #Javascript
You might like
php 文本文件的读取效率
2012/02/10 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
DOM精简教程
2006/10/03 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
JS实现拼图游戏
2021/01/29 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
Python性能优化技巧
2015/03/09 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
python 实现绘制整齐的表格
2019/11/18 Python
Python unittest框架操作实例解析
2020/04/13 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
工作会议欢迎词
2014/01/16 职场文书
消防标语大全
2014/06/07 职场文书
财务会计专业自荐书
2014/06/30 职场文书
护士求职自荐信范文
2015/03/04 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫