# 圖片無縫滾動插件
## Jquery 插件
>[danger]使用該插件前首先需要引入jquery
~~~
(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("<li class='clone'>"+"</li>");
$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)
~~~
## 用法
### 1.引入插件
### 2. html部分
>[danger]可根據實際情況進行調整
~~~
<div id="Marquee_x">
<ul>
<li>
<div><img height="150" width="128" src="http://localhost:63342/html/images/ad.jpg" alt="圖片1"/></div>
<div><img height="150" width="128" src="http://localhost:63342/html/images/ad.jpg" alt="圖片2"/></div>
<div><img height="150" width="128" src="http://localhost:63342/html/images/ad.jpg" alt="圖片3"/></div>
<div><img height="150" width="128" src="http://localhost:63342/html/images/ad.jpg" alt="圖片4"/></div>
<div><img height="128" width="128" src="http://localhost:63342/html/images/ad.jpg" alt="圖片5" /></div>
<div><img height="128" width="128" src="http://localhost:63342/html/images/ad.jpg" alt="圖片6"/></div>
</li>
</ul>
</div>
~~~
### 3. CSS代碼
>[success]根據實際情況進行調整
~~~
ul,li{list-style:none}
#Marquee_x { overflow:hidden; width: 580px; } //定義容器寬度
#Marquee_x ul li ,#Marquee_x ul li div{ float:left;}
#Marquee_y { overflow:hidden; height:500px; width:200px; }
~~~
### 4. 調用插件
~~~
<script>
$(function(){
//水平滾動
$('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':1 });
//垂直滾動
$('#Marquee_y').jcMarquee({ 'marquee':'y','margin_bottom':'10px','speed':5 });
});
</script>
~~~
