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 相关文章推荐
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
JS画5角星方法介绍
Sep 17 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
JavaScript实现滚动加载更多
Dec 27 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中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
Python实现excel转sqlite的方法
2017/07/17 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
基于python 凸包问题的解决
2020/04/16 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
高三毕业寄语
2014/04/10 职场文书
小学生期末评语大全
2014/04/21 职场文书
计划生育宣传标语
2014/06/21 职场文书