自适应可上下左右拖动的jquery幻灯片

        很久没有更新插件了，最近也是太忙了。今天，推荐一款非常强大的jquery幻灯片插件，自适应浏览器宽度，手机、pc、平板都可以用。带加载条和播放按钮，支持鼠标或手指按住上下和左右拖拽切换图片，支持点击缩略图，切换图片。还支持全屏播放，点击左上角的全屏按钮，即可进入全屏模式，并且全屏模式下，也可以切换图片。图片切换花样多。
1、在head引入相关css和js：

<link rel="stylesheet" href="css/zzsc.css" />
<link href="css/transformer.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.seven.min.js"></script>
<script type="text/javascript" src="js/jquery.reference.js"></script>

2、在需要使用本幻灯片的位置加入下面的html代码：

<div class="wpb_raw_code wpb_content_element wpb_raw_html">
	<div class="wpb_wrapper"></div>
</div>
<div class="wpb_raw_code wpb_content_element wpb_raw_html">
	<div class="wpb_wrapper">
		<div class="seven_container" id="seven_container_home" style="margin-top:-30px;">
			<div id="seven_viewport" class="seven_viewport">
				<div class="seven_slider">
					<div class="seven_slide" data-animation="117" data-caption="We are watchers and protectors" image-src="images/26.jpg">
					</div>
					<div class="seven_slide" data-animation="118" data-caption="We will defend the world at all the cost" image-src="images/27.jpg" video-src="">
					</div>
					<div class="seven_slide" data-animation="119" data-caption="I love Rock &amp; Roll" data-link="http://www.5imoban.net/" image-src="images/28.jpg" data-animation="1">
					</div>
					<div class="seven_slide" data-animation="120" data-caption="Who will own the world?" image-src="images/29.jpg">
					</div>
					<div class="seven_slide" data-animation="116" data-caption="We are watchers and protectors" image-src="images/30.jpg">
					</div>
				</div>
			</div>
			<a id="left_btn" class="seven_nav">
			Previous Slide</a>
			<a id="right_btn" class="seven_nav right_btn">
			Next Slide</a></div>
	</div>
</div>

3、调用本插件：

<script type="text/javascript" language="javascript">
$(document).ready(function(){
	var tb=$("#seven_container_home").superseven({
		width:1920,
		height:600,
		autoplay:false,
		interval:5,
		fullwidth:true,
		responsive:true,
		progressbar:true,
		swipe:true,
		keyboard:false,
		scrollmode:false,
		animation:300,
		navtype:1,
		repeat_mode:true,
		skin:'transformer',
		lightbox:true,
		pause_on_hover:true,
		path:'css/'
	});
});
</script>

参数通俗易懂，在这里就不做过多解释。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！