0%
这是一片思考的空间 -- arthinking
Spring 重构&代码整洁之道 软件设计 JVM 并发编程 数据结构与算法 分布式 存储 网络 微服务 设计模式
Java技术栈 - 涉及Java技术体系

jQuery编写钟摆式滚动器

一组由8幅图组成的图片,初始时显示前面4张,点击图片下面的向左按钮,图片向左滚动最后显示后面4张图片,可以按左右按钮来回滚动图片。

首先编写HTML代码:

显示图片的div,只显示四幅图片

CSS样式控制如下:

这里需要注意的就是#scroller要设置position:relative; 并且设置#images img{position:relative;} 这样才能让图片滚动。

接下来是使用jQuery代码编写响应事件:

运行效果图如下:

[caption id="attachment_427" align="aligncenter" width="516" caption="jQuery钟摆式滚动器"]jQuery钟摆式滚动器[/caption]

欢迎关注我的其它发布渠道