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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
Openlayers实现地图的基本操作
Sep 28 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
SSI指令
2006/11/25 PHP
PHP6 先修班 JSON实例代码
2008/08/23 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python图像处理入门(一)
2019/04/04 Python
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
2014年高三毕业生自我评价
2014/01/11 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
五年级学生期末评语
2014/12/26 职场文书
打架检讨书范文
2015/01/27 职场文书
新郎婚礼致辞
2015/07/27 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书