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

所属分类:媒体-幻灯片和轮播图

 31233  334  查看评论 (0)
分享到微信朋友圈
X
jQuery跨浏览器幻灯片插件jquery.iosslider ie兼容8

共有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
	});

});


相关插件-幻灯片和轮播图

仿FLASH轮播图

纯js的运动加定时器做的,掌握后可以自己做出任何运动效果。
  幻灯片和轮播图
 24182  321

jQuery仿百度新闻首页焦点图

jQuery仿百度新闻首页焦点图
  幻灯片和轮播图
 44380  391

jquery仿flash漂亮横向图片滚动效果

jquery仿flash漂亮横向图片滚动效果
  幻灯片和轮播图
 34148  342

根据浏览器宽度大小自动调整图片的jquery相册代码

根据浏览器宽度大小自动调整图片的jquery相册代码
  幻灯片和轮播图
 25960  319

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复