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

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

 26508  289  查看评论 (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
	});

});


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

自适应图片轮播插件

自适应图片轮播插件,支持移动端滑动切换同时兼容性好
  幻灯片和轮播图
 39063  388

jQuery带缩略图的轮播

通过点击缩略图或点击缩略图左右按钮进行切换
  幻灯片和轮播图
 56027  483

纯CSS全屏轮播滑块

用CSS制作交互式滑块,这是可能的,没有使用任何JavaScript。在这里下面教程告诉你如何使纯CSS不使用jQuery或基于JavaScript来创建全屏滑块。
  幻灯片和轮播图
 42839  353

原声 JS + Jquery + 面向对象轮播图

几个效果的轮播图,最后组成个组件效果,可供学习
  幻灯片和轮播图
 38210  350

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

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