首页 > 特效插件 > 滚动轮播 >  自适应可上下左右拖动的jquery幻灯片正文

自适应可上下左右拖动的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="https://5.jimth.com/" 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>
参数通俗易懂，在这里就不做过多解释。
TAGS: 自  适应  可  上下左右  拖动  的  jquery  幻灯片