jQuery轮播图插件

 查看演示  website  立即下载

全屏轮播图

该插件基于jquery开发，现阶段很多PC网站都需要用到轮播图切换的效果，很多时候要在页面中复用轮播图，而且对于PC用户而言，IE8+用户居多，需要做一个兼容该用户群体的全屏轮播图，同时也可以通过参数设置来把该幻灯片设置为非全屏复用多个位置。这时候该插件便应运而生。可以通过简单的调用及样式来对其进行调用，从而完成快速开发的过程。该模块并非只能是轮播图，轮播图条目区域可以放上文字列表、图片等任意内容，这块在于你自己选择。接下来对该插件进行一个

方法调用

现在对方法调用进行一个简单的解析，后面再就函数进行具体的解析。

html

<!-- 重置样式表，按自己需要重置，并非一定用这个。 -->
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css">
<!-- 引入slide插件样式表 -->
<link rel="stylesheet" href="../dist/css/full-screen-slide.min.css">
<!-- 调用demo -->
<div class="slide-box-demo">
	<div class="slide-box">
		<!-- 轮播图主体模块 -->
		<div class="slide-con">
			<div class="slide-out">
				<div class="slide-li">
					<div class="slide-li-content">
						<div class="box" style="background: #ddd;color: #333;height: 600px">这里是文本存放位置</div>
					</div>
				</div>
				<div class="slide-li"><img src="../dist/images/slide/1.png" style="width: 100%" alt=""></div>
				<div class="slide-li">
					<div class="slide-li-content">
						<div class="box" style="background: #ccc;color: #333;height: 600px">这里是文本存放位置</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 默认上一页下一页 -->
		<div class="slide-page">
			<div class="slide-button-prev" id="slide-button-prev"><i></i></div>
			<div class="slide-button-next" id="slide-button-next"><i></i></div>
		</div>
	</div>	
</div>
<!-- 引入jquery -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 引入slide插件js文件 -->
<script src="../dist/js/full-screen-slide.min.js"></script>

js

// 默认
$('.slide-box-demo').setSlide()

参数解析

demo演示

对于上面所做的解析，如果还有不明白的话，不用担心，就上面的参数提供了demo进行解析，让你快速开发你想要的轮播图。下面为相关demo的地址：

• 默认调用 01-default

• 上下页切换调用 02-navigation.html

• 分页调用 03-pagination.html

• 自动播放 04-autoplay.html

• 自定义宽高 05-widthAndheightSetting.html

• 块状展示 06-block-display.html

• 宽高完全全屏 07-fullscreen.html

• 回调函数 08-callback.html

PREVIOUS:
NEXT:
商城取货时间选择插件（原创）
简洁大气的企业网站模板