幻灯片/轮播

带缩略图过渡动画效果jQuery轮播图特效

PetitQPetitQ 幻灯片/轮播 2018-11-07 2.20K 0
收藏
阿里云


这是一款带缩略图和多种过渡动画效果的 jquery 轮播图特效。该 jquery 轮播图特效可以自定义各种图片过渡动画效果，并且是响应式设计，兼容 ie8 浏览器，适合网站多图片的轮播展示。

使用方法:

在页面中引入 jquery 和 jssor.slider-21.1.6.min.js 文件。

也想出现在这里？联系我们吧
创客主机
  1. <script src="js/jquery.min.js" type="text/javascript"></script>
  2. <script src="js/jssor.slider-21.1.6.min.js" type="text/javascript"></script>

HTML 结构:

该 jquery 轮播图的 HTML 结构如下：

  1. <div id="jssor_1" style="position: relative; margin: 0 auto; top: 20px; left: 0px; width: 960px; height: 480px; overflow: hidden; visibility: hidden; background-color: #24262e;">
  2.     <!-- Loading Screen -->
  3.     <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
  4.         <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
  5.         <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
  6.     </div>
  7.     <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden;">
  8.         <div data-p="150.00">
  9.             <img data-u="image" src="img/01.jpg" />
  10.             <img data-u="thumb" src="img/01.jpg" />
  11.         </div>
  12.         <div data-p="150.00" style="display: none;">
  13.             <img data-u="image" src="img/02.jpg" />
  14.             <img data-u="thumb" src="img/02.jpg" />
  15.         </div>
  16.         <div data-p="150.00" style="display: none;">
  17.             <img data-u="image" src="img/03.jpg" />
  18.             <img data-u="thumb" src="img/03.jpg" />
  19.         </div>
  20.         <div data-p="150.00" style="display: none;">
  21.             <img data-u="image" src="img/04.jpg" />
  22.             <img data-u="thumb" src="img/04.jpg" />
  23.         </div>
  24.         <div data-p="150.00" style="display: none;">
  25.             <img data-u="image" src="img/05.jpg" />
  26.             <img data-u="thumb" src="img/05.jpg" />
  27.         </div>
  28.         <div data-p="150.00" style="display: none;">
  29.             <img data-u="image" src="img/06.jpg" />
  30.             <img data-u="thumb" src="img/06.jpg" />
  31.         </div>
  32.         <div data-p="150.00" style="display: none;">
  33.             <img data-u="image" src="img/07.jpg" />
  34.             <img data-u="thumb" src="img/07.jpg" />
  35.         </div>
  36.         <div data-p="150.00" style="display: none;">
  37.             <img data-u="image" src="img/08.jpg" />
  38.             <img data-u="thumb" src="img/08.jpg" />
  39.         </div>
  40.         <div data-p="150.00" style="display: none;">
  41.             <img data-u="image" src="img/09.jpg" />
  42.             <img data-u="thumb" src="img/09.jpg" />
  43.         </div>
  44.         <div data-p="150.00" style="display: none;">
  45.             <img data-u="image" src="img/10.jpg" />
  46.             <img data-u="thumb" src="img/10.jpg" />
  47.         </div>
  48.         <div data-p="150.00" style="display: none;">
  49.             <img data-u="image" src="img/11.jpg" />
  50.             <img data-u="thumb" src="img/11.jpg" />
  51.         </div>
  52.         <div data-p="150.00" style="display: none;">
  53.             <img data-u="image" src="img/12.jpg" />
  54.             <img data-u="thumb" src="img/12.jpg" />
  55.         </div>
  56.         <div data-p="150.00" style="display: none;">
  57.             <img data-u="image" src="img/13.jpg" />
  58.             <img data-u="thumb" src="img/13.jpg" />
  59.         </div>
  60.         <div data-p="150.00" style="display: none;">
  61.             <img data-u="image" src="img/14.jpg" />
  62.             <img data-u="thumb" src="img/14.jpg" />
  63.         </div>
  64.         <a data-u="any" href="#" style="display:none">Image Gallery with Vertical Thumbnail</a>
  65.     </div>
  66.     <!-- Thumbnail Navigator -->
  67.     <div data-u="thumbnavigator" class="jssort01-99-66" style="position:absolute;left:0px;top:0px;width:240px;height:480px;" data-autocenter="2">
  68.         <!-- Thumbnail Item Skin Begin -->
  69.         <div data-u="slides" style="cursor: default;">
  70.             <div data-u="prototype" class="p">
  71.                 <div class="w">
  72.                     <div data-u="thumbnailtemplate" class="t"></div>
  73.                 </div>
  74.                 <div class="c"></div>
  75.             </div>
  76.         </div>
  77.         <!-- Thumbnail Item Skin End -->
  78.     </div>
  79.     <!-- Arrow Navigator -->
  80.     <span data-u="arrowleft" class="jssora05l" style="top:0px;left:248px;width:40px;height:40px;" data-autocenter="2"></span>
  81.     <span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
  82. </div>

CSS 样式:

为该 jquery 轮播图添加下面的 CSS 样式：

  1. .jssora05l, .jssora05r {
  2.     display: block;
  3.     position: absolute;
  4.     /* size of arrow element */
  5.     width: 40px;
  6.     height: 40px;
  7.     cursor: pointer;
  8.     background: url('img/a17.png') no-repeat;
  9.     overflow: hidden;
  10. }
  11. .jssora05l { background-position: -10px -40px; }
  12. .jssora05r { background-position: -70px -40px; }
  13. .jssora05l:hover { background-position: -130px -40px; }
  14. .jssora05r:hover { background-position: -190px -40px; }
  15. .jssora05l.jssora05ldn { background-position: -250px -40px; }
  16. .jssora05r.jssora05rdn { background-position: -310px -40px; }
  17. .jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; }
  18. .jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; }
  19. .jssort01-99-66 .p {    position: absolute;    top: 0;    left: 0;    width: 99px;    height: 66px;}.jssort01-99-66 .t {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    border: none;}.jssort01-99-66 .w {    position: absolute;    top: 0px;    left: 0px;    width: 100%;    height: 100%;}.jssort01-99-66 .c {    position: absolute;    top: 0px;    left: 0px;    width: 95px;    height: 62px;    border: #000 2px solid;    box-sizing: content-box;    background: url('img/t01.png') -800px -800px no-repeat;    _background: none;}.jssort01-99-66 .pav .c {    top: 2px;    _top: 0px;    left: 2px;    _left: 0px;    width: 95px;    height: 62px;    border: #000 0px solid;    _border: #fff 2px solid;    background-position: 50% 50%;}.jssort01-99-66 .p:hover .c {    top: 0px;    left: 0px;    width: 97px;    height: 64px;    border: #fff 1px solid;    background-position: 50% 50%;}.jssort01-99-66 .p.pdn .c {    background-position: 50% 50%;    width: 95px;    height: 62px;    border: #000 2px solid;}* html .jssort01-99-66 .c, * html .jssort01-99-66 .pdn .c, * html .jssort01-99-66 .pav .c {    /* ie quirks mode adjust */    width /**/: 99px;    height /**/: 66px;}

初始化插件:

在页面 DOM 元素加载完毕之后，通过下面的方法来初始化该 jquery 轮播图插件。

  1. jQuery(document).ready(function ($) {
  2.  
  3.     var jssor_1_SlideshowTransitions = [
  4.       {$Duration:1200,$Zoom:1,$Easing:{$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad},$Opacity:2},
  5.       {$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
  6.       {$Duration:1200,$Zoom:1,$Rotate:1,$During:{$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
  7.       {$Duration:1000,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
  8.       {$Duration:1200,x:0.5,$Cols:2,$Zoom:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
  9.       {$Duration:1200,x:4,$Cols:2,$Zoom:11,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
  10.       {$Duration:1200,x:0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
  11.       {$Duration:1000,x:-4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
  12.       {$Duration:1200,x:-0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
  13.       {$Duration:1000,x:4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
  14.       {$Duration:1200,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
  15.       {$Duration:1000,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.7}},
  16.       {$Duration:1200,x:-4,y:2,$Rows:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Row:28},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
  17.       {$Duration:1200,x:1,y:2,$Cols:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:19},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.8}}
  18.     ];
  19.  
  20.     var jssor_1_options = {
  21.       $AutoPlay: true,
  22.       $SlideshowOptions: {
  23.         $Class: $JssorSlideshowRunner$,
  24.         $Transitions: jssor_1_SlideshowTransitions,
  25.         $TransitionsOrder: 1
  26.       },
  27.       $ArrowNavigatorOptions: {
  28.         $Class: $JssorArrowNavigator$
  29.       },
  30.       $ThumbnailNavigatorOptions: {
  31.         $Class: $JssorThumbnailNavigator$,
  32.         $Rows: 2,
  33.         $Cols: 6,
  34.         $SpacingX: 14,
  35.         $SpacingY: 12,
  36.         $Orientation: 2,
  37.         $Align: 156
  38.       }
  39.     };
  40.  
  41.     var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
  42.  
  43.     /*responsive code begin*/
  44.     /*you can remove responsive code if you don't want the slider scales while window resizing*/
  45.     function ScaleSlider() {
  46.         var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
  47.         if (refSize) {
  48.             refSize = Math.min(refSize, 960);
  49.             refSize = Math.max(refSize, 300);
  50.             jssor_1_slider.$ScaleWidth(refSize);
  51.         }
  52.         else {
  53.             window.setTimeout(ScaleSlider, 30);
  54.         }
  55.     }
  56.     ScaleSlider();
  57.     $(window).bind("load", ScaleSlider);
  58.     $(window).bind("resize", ScaleSlider);
  59.     $(window).bind("orientationchange", ScaleSlider);
  60.     /*responsive code end*/
  61. });

带缩略图过渡动画效果 jQuery 轮播图特效

已有 550 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址

咨询客服 中文演示

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！

创客主机
收藏
赞(0)

相关文章

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！

登录