网络编程
位置：首页>> 网络编程>> JavaScript>> jQuery 横向滚动图片

jQuery 横向滚动图片

作者：张经纬　来源：张经纬的博客　发布时间：2009-03-11 13:09:00　

标签：图片,特效,滚动,jquery

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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com