SlideItMoo – image slider图片切换展示效果

时间：2013-08-14 09:06 来源：互联网作者：源码搜藏收藏推荐

广告推荐

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>

4。紧接着，启动脚本。写SlideItMoo作为一个阶级来启动它，你需要创建每个滑块在您的网站上有一个新的类实例，这里面裹在domready窗口事件

<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>

本站资源仅限于学习研究，严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！