SlideItMoo V1.1实施一些新的东西。那些你熟悉的1.0版本，跳到下载继续阅读。已更新为SlideItMoo更广泛的使用。对于剩下的，一些解释。此外，1.0版本是这里，我会尽力为它提供支持，如有需要。
SlideItMoo MooTools的1.2开发的一面旗帜肩，文章微调和图像滑块（旋转木马）。从第一个版本的差异是事实，现在的形象滑块支持连续滑动导航时，设置滑块滑动（左或右），当使用自动幻灯片功能提供了可能性，提供了可能给它的项目宽度（宽度滑块的项目），并让它显示元素的宽度和可见项参数。
基本上，你可以使用的脚本，而不项目宽度参数，默认情况下是空的，由脚本元素宽度的计算。虽然为了更好地控制，建议您提供此值。同去的高度，垂直滑动的传送带。的item_width值是从滑块的宽度一个单一的项目，包括任何填充，边缘或边界元素可能有高度相似。
要做出一个更好的主意有关参数，最好向他们展示：
- overallContainer：这是主要的容器ID
- elementScrolled：这个容器溢出隐患;他的内容作为一个面具
- thumbsContainer：滑块元素容器，这是元素的实际滑动
- itemsSelector：CSS类滑块项目
- 可见项目的数量itemsVisible：
- elemsSlide：一次滑动的项目数。例如，如果你设置3，当你按一下前进/后退按钮或autoSlide上，它会去第4个元素，如果第一个在活跃的一个。
- 一个单一的元素itemWidth：宽度（因为它们都具有相同的宽度）指定的itemsSelector参数
- itemHeight：一个单一的元素的高度（因为它们都具有相同的宽度）指定的itemsSelector参数。这是有用的，当用垂直传送带设置
- 资产净值：导航按钮（前进/后退按钮）将不再添加脚本。这使您的风格，整个滑块/的文章微调/旋转木马/ ...正是你想要的方式和SlideItMoo将只实现功能。每股净资产参数分为2 params：一个FWD和BK FWD是前进按钮的CSS选择器（作为。css_class）和BK背面按钮
- slideVertical：如果设置为true，将垂直滑块。请记住，你需要你的HTML来显示相应。
- 的showControls：显示或隐藏的导航链接（向前或向后）
- 过渡：您要使用的过渡（见更多的细节）
- 持续时间：过渡期限
- 方向：方向滑动（-1：回来; 1：前进）
- autoSlide：给它数毫秒，瞧！它本身滑动
- mouseWheelNav：鼠标滚轮导航默认为禁用 状态。这是由你来或不使用。
- onChange事件：事件触发每次当前幻灯片的变化。这是有用的额外的功能扩展SlideItMoo（下载存档fancy_slider.html）
作为一个与以前的版本相比，使用相同的HTML标记的的参数itemsSelector（CSS类为滑块的项目）必须提供的事实除外。此外，CSS是类似的1.0版本。其中一个主要的区别是现在的导航链接（前进/后退按钮）由用户手动添加HTML和CSS选择器的脚本提供的事实。
为了获得最佳效果，实例化的插件时，试着给它一个itemWidth / itemHeight（取决于什么类型滑块你使用 - 垂直或水平）值，使显示器看起来像你计划。请记住，itemWidth必须包括的实际元素的宽度加任何利润，填充或边框元素可能。
回到版本之间的差异，以前的版本使用Fx.Scroll使幻灯片的效果，这一个，使用的Fx.Morph。通过以下方式获得的图像移动之前/之后的当前元素达到元素的连续滑动。
脚本安装是相当简单的事情。下载脚本，请遵循以下步骤：
1。打开脚本文件夹和复制文件： 是mootools-1.2.1-core.js mootools的-1.2-more.js的的slideitmoo 1.1.js的脚本文件夹在您的应用程序2。打开样式表文件夹，复制滑块，您想在您的网页的样式表（horizontal.css，vertical.css ...）3。在您的网页上，之间的<head>的和</ head>中添加JavaScript文件和CSS样式表
2. Open stylesheet folder and copy the stylesheet of the slider you want in your pages ( horizontal.css, vertical.css … )
安装
3. In your page, between <head> and </head>, add the javascript files and the css stylesheet
<link rel="stylesheet" type="text/css" href="path_to_css/horizontal.css" />
<script language="javascript" type="text/javascript" src="path_to_scripts/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="path_to_scripts/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="path_to_scripts/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible:4,
elemsSlide:3,
duration:300,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1,
startIndex:5
});
}
});
</script>
上面的例子是一个单一的滑块。如果您在您的网站上运行2个或多个滑块，添加一个新的类的实例，这样的例子：
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
new SlideItMoo({here you put your first slider parameters});
new SlideItMoo({here you put your second slider parameters});
}
});
</script>
5。添加滑块在您的网页的HTML。基本的HTML将看起来像这样：
<div id="SlideItMoo_outer">
<div class="SlideItMoo_back"><!--slide back button--></div>
<!-- container inside used for hiding the elements outisde the view -->
<div id="SlideItMoo_inner">
<!-- actual elements container, usually having a width bigger than the one of SlideItMoo_inner -->
<div id="SlideItMoo_items">
<!-- a single element. Duplicate this for as many times you want to hold the individual elements in slider -->
<div class="SlideItMoo_element">
Here you have the element content.
</div>
</div>
</div>
<div class="SlideItMoo_forward"><!--slide forward button--></div>
</div>
自动轮播jQuery焦点图插件SliderJS
iSlider手机端图片滑动切换
jquery图片轮播插件PgwSlider
jquery全屏图片滑动插件cbpFWSlider
jquery焦点图轮播插件excoloSlider