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 面向对象全新理练之原型继承
Dec 03 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
jquery maxlength使用说明
Sep 09 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
JavaScript 中使用 Generator的方法
Dec 29 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
分享一个自定义的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字符集转换
2017/01/23 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
javascript的函数作用域
2014/11/12 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
python能在浏览器能运行吗
2020/06/17 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
优秀大学生职业生涯规划书
2014/02/27 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
网络管理专业求职信
2014/03/15 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python