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
0
投稿

猜你喜欢

  • Oracle 子程序参数模式,IN,OUT,NOCOPY

    2009-10-23 18:08:00
  • centos 安装mysql中遇到问题的解决办法

    2010-12-14 15:11:00
  • Firefox插件推荐:CSS Usage

    2009-10-26 18:44:00
  • 有关简洁网页设计需知的6点技巧

    2012-04-25 20:55:01
  • 新年伊始,看各大网站新春LOGO

    2009-01-01 19:35:00
  • 防止网上重复投票的方法

    2009-06-01 12:31:00
  • ASP XML操作类代码

    2011-03-08 10:47:00
  • js页面文字选中后分享到新浪微博实现

    2011-03-17 12:55:00
  • ASP 精华源码收集(五年总结)第1/20页

    2011-04-07 11:15:00
  • MySQL Create Database 创建数据库

    2011-09-10 16:04:51
  • SQL Server密码管理的六个危险判断

    2008-10-23 13:57:00
  • 简化ADO数据库操作的控件(带分页功能)

    2008-05-20 13:15:00
  • 一次性压缩Sqlserver2005中所有库日志的存储过程

    2012-01-29 17:58:28
  • asp使用shotgraph组件生成数字和字母验证码

    2007-09-26 12:26:00
  • Monster for Chrome

    2010-05-04 16:30:00
  • sqlserver 临时表 Vs 表变量 详细介绍

    2011-11-03 17:34:10
  • asp如何对多个条件进行判断?

    2009-11-20 18:28:00
  • 用ASP实现IE地址栏参数的判断

    2008-10-10 15:54:00
  • asp 数组 重复删除函数代码

    2011-03-03 10:47:00
  • SQL Server数据转换服务基本概念介绍

    2009-01-20 15:52:00
  • asp之家 网络编程 m.aspxhome.com