1.滚动效果:http://www.yayihouse.com/taobao.html
2.完整html页面代码:
#box div, box ul,box li{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}
#box ol, box ul ,box li{list-style:none}
#box img {border: 0; vertical-align:middle}
#box .clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px}
#box a{color:#000000;text-decoration:none}
#box a:hover{color:#BA2636;text-decoration:underline}
#box{width:925px; margin:20px auto; padding:2px;color:#000000;background:#FFF; text-align:center}
#Marquee_x { overflow:hidden; width: 925px }
#Marquee_x ul li ,#Marquee_x ul li div{ float:left;line-height:25px;overflow:hidden}
#Marquee_x ul li div{ float:left;line-height:25px; width:142px; overflow:hidden}
#Marquee_x ul li div img{ border:1px solid #DADADA; width:140px; height:130px; display:block}
#Marquee_x ul li div span{ display:block;font-size: 12px;line-height:16px;}
(function($){
$.fn.jcMarquee = function(options) {
var defaults = {
'marquee':'x',
'margin_bottom':'0',
'margin_right':'0',
'speed':'10'
};
var options = $.extend(defaults,options);
return this.each(function() {
var $marquee = $(this),
$marquee_scroll = $marquee.children('ul');
$marquee_scroll.append("
$marquee_scroll.find('li').eq(0).children().clone().appendTo('.clone');
var $marquee_left = $marquee_scroll.find('li');
if (options.marquee == 'x') {
var x = 0;
$marquee_scroll.css('width','1000%');
$marquee_left.find('div').css({'margin-right':options.margin_right});
$marquee_left.css({'margin-right':options.margin_right});
function Marquee_x(){
$marquee.scrollLeft(++x);
_margin = parseInt($marquee_left.find('div').css('margin-right'));
if(x==$marquee_left.width()+_margin) { x = 0 };
};
var MyMar=setInterval(Marquee_x,options.speed);
$marquee.hover(function(){
clearInterval(MyMar);
},function(){
MyMar=setInterval(Marquee_x,options.speed);
});
}
if (options.marquee == 'y') {
var y = 0;
$marquee_scroll.css('height','1000%');
$marquee_left.find('div').css('margin-bottom',options.margin_bottom);
$marquee_left.css('margin-bottom',options.margin_bottom);
function Marquee_y(){
$marquee.scrollTop(++y);
_margin = parseInt($marquee_left.find('div').css('margin-bottom'));
if(y==$marquee_left.height()+_margin) { y = 0 };
};
var MyMar=setInterval(Marquee_y,options.speed);
$marquee.hover(function(){
clearInterval(MyMar);
},function(){
MyMar=setInterval(Marquee_y,options.speed);
});
};
});
};
})(jQuery)
$(function(){
$('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':20 });
//10px代表间距,20代表滚动速度
});