jQuery跨浏览器幻灯片插件jquery.iosslider

共有20种以上演示效果，Demo中只例出了8种。此插件功能非常强大！

简单的使用方法

准备

开始前，你将需要下载iosslider脚本。下载包中包含的iosslider脚本，jQuery库。

<!-- jQuery library -->
<script type = 'text/javascript' src = 'jquery-1.4.min.js'></script>
<!-- iosslider plugin -->
<script type = 'text/javascript' src = 'jquery.iosslider.js'></script>

添加HTML

添加iosslider HTML代码在网页正文。HTML可以只含有一个滑动元件。

<!-- slider container -->
<div class = 'iosslider'>
    <!-- slider -->
    <div class = 'slider'>
        <!-- slides -->
        <div class = 'slide'>...</div>
        <div class = 'slide'>...</div>
        <div class = 'slide'>...</div>
    </div>
</div>

添加CSS

将CSS样式表中的。这个要求CSS属性包括保证最佳的性能。看到一些现这样的例子，检查的iosslider打包下载演示文件夹。

/* slider container */
.iosslider {
	/* required */
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	
	width: <slider width>px;
	height: <slider height>px;
}

/* slider */
.iosslider .slider {
	/* required */
	width: 100%;
	height: 100%;
}

/* slide */
.iosslider .slider .slide {
	/* required */
	float: left;

	width: <slide width>px;
	height: <slide height>px;
}

添加JavaScript

将下面的代码添加到你的JavaScript文件。下面的代码使用jQuery选择器来初始化iosslider jQuery插件。如果你不熟悉jQuery，可以直接调用下面代码

$(document).ready(function() {
	/* basic - default settings */
	$('.iosslider').iosSlider();
	
	/* some custom settings */
	$('.iosslider').iosSlider({
		snapToChildren: true,
		scrollbar: true,
		scrollbarHide: false,
		desktopClickDrag: true,
		scrollbarLocation: 'bottom',
		scrollbarHeight: '6px',
		scrollbarBackground: 'url(_img/some-img.png) repeat 0 0',
		scrollbarBorder: '1px solid #000',
		scrollbarMargin: '0 30px 16px 30px',
		scrollbarOpacity: '0.75',
		onSlideChange: changeSlideIdentifier
	});

});

PREVIOUS:
NEXT:
鼠标经过不同标签触发不同背景
Rectangle仿flash交互漂亮个人简历模板