不间断连续滚动,文字图片都可以
2014-02-10 11:58
357 查看
<html> <head> <base href="http://keleyi.com"> <title></title><base target="_blank" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <style> *{ margin:0; padding:0;} #photo-list{ width:980px; height:400px; margin:0 auto; overflow:hidden;} ul{ width:9999px; height:400px;} ul li{height:400px;width:980px; display:inline-block;list-style-type:none; float:left;} .one{ background:#f0b8b8;} .two{ background:#eef0b8;} .three{ background:#b8f0d7;} .fore{ background:#b8e1f0;} </style> </head> <body> <div id="photo-list"> <ul id="scroll"> <li class="one"></li> <li class="two"></li> <li class="three"></li> <li class="fore"></li> </ul> </div> <script> $(function () { var c = $('#photo-list'); var ul = $('#scroll'), itemCount = $("li").length, width = $("li").width(), //获得每个img容器的宽度 scrollLeft = 0, marquee = function () { c.scrollLeft(scrollLeft); scrollLeft += 2; if (scrollLeft % width <= 1) { //当 c.scrollLeft 和 width 相等时,把第一个img追加到最后面 var htm = $("li").first().clone(); ul.append(htm); $("li").first().remove(); scrollLeft = 0; }; }, speed = 20; //数值越大越慢 $('#scroll').width(width * itemCount + 'px'); //加载完后设置容器长度 var timer = setInterval(marquee, speed); }) </script> </body> </html>
相关文章推荐
- Java之美[从菜鸟到高手演变]之HashMap、HashTable .
- 中介者模式(Mediator Pattern)
- ubuntu下Apache虚拟主机的配置
- textarea文本输入区内的文本换行
- OCP试题疑问集-053
- C++中获取高精度时间差
- Hadoop CombineFileInputFormat原理说明(转)
- js中将字符串转换成json的三种方式
- HTTP错误码
- 彬红茶小童鞋 45 个非常有用的 Oracle 查询语句
- iOS7程序适配
- A+B输入输出练习系列II
- 在C#中使用GDAL创建Shape文件
- python基础教程之popen函数操作其它程序的输入和输出示例
- Cocos2d-x设计模式之五 :防御式编程模式
- Android Action Bar 详解篇
- 1.5 数据结构基础(一)
- Win7 64 bit 激活工具
- 自编译cm10 cm11代码方法
- 鸿宝术高端研修班天机班