jQuery 横向滚动图片
作者:张经纬 来源:张经纬的博客 时间:2009-03-11 13:09:00
1、可以控制左横向滚动还是右横向滚动。
2、鼠标悬停上时暂停滚动,移开后恢复滚动。
3、间歇时间按需调整,但不要低于容器向左/右移动的时间。
JAVASCRIPT代码:
var scrollWrapW,myScroll;
var rollDirection = 0; //0为左 1为右
var speed = 500;
function __scrollBox(){
if (rollDirection == 0){
scrollWrapW = -($('ul li').eq(0).outerWidth(true) + $('ul li').eq(1).outerWidth(true)) + 'px';
$('ul').animate({left:scrollWrapW}, {
duration:200,
complete:function(){
$('ul').append($('ul li:first')).append($('ul li:first'));
$('ul').css("left","0");
}
});
}else{
var last = $('ul li').length - 1;
var last2 = $('ul li').length - 2;
scrollWrapW = -($('ul li').eq(last).outerWidth(true) + $('ul li').eq(last2).outerWidth(true)) + 'px';
$('ul').animate({left:0}, {
duration:200,
complete:function(){
$('ul').prepend($('ul li:last')).prepend($('ul li:last'));
$('ul').css("left",scrollWrapW);
}
});
}
}
$(document).ready(function(){
/* roll control */
myScroll = setInterval(__scrollBox,speed);
$('#scrool_wrap').hover(function(){
clearInterval(myScroll);
},function(){
myScroll = setInterval(__scrollBox,speed);
});
/* left control */
$('.left').click(function(){
rollDirection = 0;
});
$('.right').click(function(){
rollDirection = 1;
});
})
演示地址:jquery-scrolling-picture.htm
标签:图片,特效,滚动,jquery
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python 私有化操作实例分析
2022-11-06 05:44:42
![](https://img.aspxhome.com/file/2023/9/69049_0s.png)
Python基于hashlib模块的文件MD5一致性加密验证示例
2022-03-30 12:05:40
解决mysql不能插入中文Incorrect string value
2009-07-30 09:02:00
jquery判断元素是否隐藏的多种方法
2024-04-19 10:23:51
想学画画?python满足你!
2022-03-28 02:52:30
![](https://img.aspxhome.com/file/2023/1/114601_0s.png)
MySQL/MariaDB 如何实现数据透视表的示例代码
2024-01-13 16:12:18
Go语言基于Socket编写服务器端与客户端通信的实例
2023-07-12 08:44:11
![](https://img.aspxhome.com/file/2023/3/135453_0s.png)
HTML5 WebSockets基础使用教程
2010-09-21 12:48:00
![](https://img.aspxhome.com/file/UploadPic/20109/21/01-97s.jpg)
Python利用Scrapy框架爬取豆瓣电影示例
2022-04-30 15:16:17
![](https://img.aspxhome.com/file/2023/3/86253_0s.png)
python Matplotlib模块的使用
2022-12-26 21:18:37
python开发入门——列表生成式
2023-03-05 03:52:21
SQL Server 数据库基础编程详解
2024-01-17 03:29:37
Django全局启用登陆验证login_required的方法
2021-05-29 12:49:31
![](https://img.aspxhome.com/file/2023/1/102341_0s.png)
MySQL索引概念及七种索引类型分享介绍
2024-01-23 03:55:27
关于Mysql隔离级别、锁与MVCC介绍
2024-01-16 04:28:26
浅谈慢SQL优化之索引的作用
2024-01-24 20:31:54
![](https://img.aspxhome.com/file/2023/7/98387_0s.webp)
redux-saga 初识和使用
2023-07-15 16:20:17
JS+ASP实现无刷新新闻列表方法
2007-08-22 12:44:00
Python+Pillow进行图形处理的示例详解
2021-08-03 22:42:34
![](https://img.aspxhome.com/file/2023/4/112044_0s.jpg)
如何把一个Excel文件放到ASP页面中去?
2009-11-07 17:54:00