自适应可上下左右拖动的jquery幻灯片_网页滚动图片特效,jquery图片滚动,js图片无缝滚动,图片轮播免费下载_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

特效介绍

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

使用方法

1、在head引入相关css和js：

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

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

01<div class="wpb_raw_code wpb_content_element wpb_raw_html">
02    <div class="wpb_wrapper"></div>
03</div>
04<div class="wpb_raw_code wpb_content_element wpb_raw_html">
05    <div class="wpb_wrapper">
06        <div class="seven_container" id="seven_container_home" style="margin-top:-30px;">
07            <div id="seven_viewport" class="seven_viewport">
08                <div class="seven_slider">
09                    <div class="seven_slide" data-animation="117" data-caption="We are watchers and protectors" image-src="images/26.jpg">
10                    </div>
11                    <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="">
12                    </div>
13                    <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">
14                    </div>
15                    <div class="seven_slide" data-animation="120" data-caption="Who will own the world?" image-src="images/29.jpg">
16                    </div>
17                    <div class="seven_slide" data-animation="116" data-caption="We are watchers and protectors" image-src="images/30.jpg">
18                    </div>
19                </div>
20            </div>
21            <a id="left_btn" class="seven_nav">
22            Previous Slide</a>
23            <a id="right_btn" class="seven_nav right_btn">
24            Next Slide</a></div>
25    </div>
26</div>

3、调用本插件：

01<script type="text/javascript" language="javascript">
02$(document).ready(function(){
03    var tb=$("#seven_container_home").superseven({
04        width:1920,
05        height:600,
06        autoplay:false,
07        interval:5,
08        fullwidth:true,
09        responsive:true,
10        progressbar:true,
11        swipe:true,
12        keyboard:false,
13        scrollmode:false,
14        animation:300,
15        navtype:1,
16        repeat_mode:true,
17        skin:'transformer',
18        lightbox:true,
19        pause_on_hover:true,
20        path:'css/'
21    });
22});
23</script>