特效介绍
很久没有更新插件了,最近也是太忙了。今天,推荐一款非常强大的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 > |
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" > |
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 = "" > |
13 | < div class = "seven_slide" data-animation = "119" data-caption = "I love Rock & Roll" data-link = "http://www.5imoban.net/" image-src = "images/28.jpg" data-animation = "1" > |
15 | < div class = "seven_slide" data-animation = "120" data-caption = "Who will own the world?" image-src = "images/29.jpg" > |
17 | < div class = "seven_slide" data-animation = "116" data-caption = "We are watchers and protectors" image-src = "images/30.jpg" > |
21 | < a id = "left_btn" class = "seven_nav" > |
23 | < a id = "right_btn" class = "seven_nav right_btn" > |
3、调用本插件:
01 | <script type= "text/javascript" language= "javascript" > |
02 | $(document).ready( function (){ |
03 | var tb=$( "#seven_container_home" ).superseven({ |
参数通俗易懂,在这里就不做过多解释。