开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 苹果 dedecms 修真图
当前位置：首页 > 网页特效 > 幻灯片 >  带圆形缩略图旋转器 全屏幻灯片

带圆形缩略图旋转器 全屏幻灯片

  • 源码大小：14.72MB
  • 所需积分：1积分
  • 源码编号：19JP-3495
  • 浏览次数：769次
  • 最后更新：2023年06月19日
  • 所属栏目：幻灯片
我要下载 浏览效果
加入收藏
本站默认解压密码：19jp.com 或 19jp_com

最新资源

[软件工具] 雷神网游加速器 免费体验
[软件工具] 360极速浏览器X 64位
[免扣元素] 541款水果无底图PNG素材高像素高清水果图片免扣素材水果坚果
[软件工具] 正则表达式生成工具 v2.1 绿色免费版
[软件工具] 取色软件Pipette v21.5.5 中文绿色版 取色器
[后台模板] 基于bootstrap后台管理模板
[后台模板] 紫色渐变OA系统后台模板
[公司企业] 数字科技企业机构HTML5模板
[公司企业] 房产物业公司Bootstrap模板
[后台模板] 后台数据统计Bootstrap5模板

简介

一个响应灵敏、移动友好的全屏背景幻灯片，配有圆形旋转器控件，您可以通过单击/点击缩略图在图像之间切换。

如何使用它:

1.在文档中加载必要的JavaScript库。依赖项：

  • jQuery库
  • GSAP动画库
  • 图像加载的JavaScript库
  1. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
  3. <script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/TextPlugin.min.js"></script>

2.将图像添加到幻灯片中。

  1. <section class="slideshow">
  2.  
  3.   <!-- Thumbnail Rotator -->
  4.   <ul class="navigation">
  5.  
  6.     <li class="navigation-item active">
  7.       <span class="rotate-holder"></span>
  8.       <span class="background-holder" style="background-image: url(1.jpg);"></span>
  9.     </li>
  10.  
  11.     <li class="navigation-item">
  12.       <span class="rotate-holder"></span>
  13.       <span class="background-holder" style="background-image: url(2.jpg);"></span>
  14.     </li>
  15.    
  16.     <li class="navigation-item">
  17.       <span class="rotate-holder"></span>
  18.       <span class="background-holder" style="background-image: url(3.jpg);"></span>
  19.     </li>
  20.    
  21.     ...
  22.  
  23.   </ul>
  24.   
  25.   <!-- Slideshow -->
  26.   <div class="detail">
  27.    
  28.     <div class="detail-item active">
  29.       <div class="headline">Image 1</div>
  30.       <div class="background" style="background-image: url(1.jpg); height: 100vh;"></div>
  31.       <div class="background" style="background-image: url(1.jpg); height: 100vh; background-size: cover; background-position: center;"></div>
  32.     </div>
  33.     
  34.     <div class="detail-item">
  35.       <div class="headline">Image 2</div>
  36.       <div class="background" style="background-image: url(2.jpg);"></div>
  37.     </div>
  38.  
  39.     <div class="detail-item">
  40.       <div class="headline">Image 3</div>
  41.       <div class="background" style="background-image: url(3.jpg);"></div>
  42.     </div>
  43.  
  44.     ...
  45.     
  46.   </div>
  47.  
  48. </section>

3.必要的CSS样式。

  1. body section.slideshow {
  2.   position: relative;
  3.   display: block;
  4.   width: 100%;
  5.   height: 100%;
  6.   height: 100vh;
  7.   margin: 0 auto;
  8.   visibility: hidden;
  9.   overflow: hidden;
  10. }
  11.  
  12. body section.slideshow ul.navigation {
  13.   position: absolute;
  14.   display: block;
  15.   width: 640px;
  16.   height: 640px;
  17.   padding: 0;
  18.   margin: 0;
  19.   left: -230px;
  20.   top: 50%;
  21.   margin-top: -320px;
  22.   z-index: 10;
  23. }
  24.  
  25. body section.slideshow ul.navigation li.navigation-item {
  26.   position: absolute;
  27.   display: inline-block;
  28.   overflow: hidden;
  29.   width: 120px;
  30.   height: 120px;
  31.   padding: 10px;
  32.   text-align: center;
  33.   cursor: pointer;
  34.   border-radius: 50%;
  35.   transition: border 0.6s ease-in-out;
  36. }
  37.  
  38. body section.slideshow ul.navigation li.navigation-item .rotate-holder {
  39.   position: fixed;
  40.   display: block;
  41.   width: 0;
  42.   height: 0;
  43.   left: -9999px;
  44.   top: -9999px;
  45. }
  46.  
  47. body section.slideshow ul.navigation li.navigation-item .background-holder {
  48.   position: absolute;
  49.   display: block;
  50.   width: 100%;
  51.   height: 100%;
  52.   top: 0;
  53.   right: 0;
  54.   bottom: 0;
  55.   left: 0;
  56.   border-radius: 50%;
  57.   background-repeat: no-repeat;
  58.   background-position: center center;    
  59.   background-size: cover;
  60.   opacity: 1;
  61.   visibility: visible;
  62.   transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  63. }
  64.  
  65. body section.slideshow ul.navigation li.navigation-item:hover .background-holder {
  66.   opacity: 0.75;
  67. }
  68.  
  69. body section.slideshow ul.navigation li.navigation-item.active .background-holder {
  70.   opacity: 0;
  71.   visibility: hidden;
  72. }
  73.  
  74. body section.slideshow .detail {
  75.   position: absolute;
  76.   display: block;
  77.   width: 100%;
  78.   height: 100%;
  79.   top: 0;
  80.   right: 0;
  81.   bottom: 0;
  82.   left: 0;
  83.   z-index: 8;
  84. }
  85.  
  86. body section.slideshow .detail .detail-item {
  87.   position: absolute;
  88.   display: block;
  89.   width: 100%;
  90.   height: 100%;
  91.   top: 0;
  92.   right: 0;
  93.   bottom: 0;
  94.   left: 0;
  95.   opacity: 0;
  96.   visibility: hidden;
  97.   transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  98. }
  99.  
  100. body section.slideshow .detail .detail-item .headline {
  101.   position: absolute;
  102.   display: block;
  103.   width: 100%;
  104.   max-width: calc(100% - 480px);
  105.   height: 126px;
  106.   top: 50%;
  107.   left: 50%;
  108.   transform: translate(-50%, -50%);
  109.   overflow: visible;
  110.   white-space: nowrap;
  111.   box-sizing: border-box;
  112.   z-index: 2;
  113. }
  114.  
  115. body section.slideshow .detail .detail-item .headline .letter {
  116.   position: relative;
  117.   display: inline-block;
  118.   opacity: 0;
  119.   visibility: hidden;
  120.   color: #FFFFFF;
  121.   font-size: 132px;
  122.   line-height: 110px;
  123.   font-weight: 900;
  124.   font-kerning: none;
  125.   white-space: nowrap;
  126.   box-sizing: border-box;
  127.   text-transform: uppercase;
  128. }
  129.  
  130. body section.slideshow .detail .detail-item .background {
  131.   position: absolute;
  132.   display: block;
  133.   width: 100%;
  134.   width: calc(100% + 100px);
  135.   height: 100%;
  136.   height: calc(100% + 100px);
  137.   top: 0;
  138.   right: 0;
  139.   bottom: 0;
  140.   left: 0;
  141.   overflow: visible;
  142.   background-repeat: no-repeat;
  143.   background-position: center center;     
  144.   background-size: cover;
  145.   z-index: 1;
  146. }
  147.  
  148. body section.slideshow .detail .detail-item .background::before {
  149.   content: ""; 
  150.   background: linear-gradient(to right, black 0%, rgba(0, 0, 0, 0) 90%);   
  151.   position: absolute;
  152.   display: block;
  153.   width: 100%;
  154.   height: 100%;
  155.   top: 0;
  156.   right: 0;
  157.   bottom: 0;
  158.   left: 0;
  159.   z-index: 2;
  160.     
  161. }
  162.  
  163. body section.slideshow .detail .detail-item.active {
  164.   opacity: 1;
  165.   visibility: visible;
  166. }

4.启用幻灯片放映。

  1. $('.slideshow').imagesLoaded({ background: true })
  2. .done( function() {
  3.   // hide loader
  4.   $('.loader').addClass('is-loaded');
  5.   
  6.   // init variables
  7.   var slideshow = $(".slideshow"),
  8.     navigation = $(".navigation"),
  9.     navigationItem = $(".navigation-item"),
  10.     detailItem = $(".detail-item"),
  11.     rotation,
  12.     type = '_short';
  13.  
  14.   // prepare letters
  15.   $('.headline').each(function() {
  16.     $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
  17.   });
  18.  
  19.   // prepare navigation and set navigation items on the right place
  20.   navigationItem.each(function(index, elem) {
  21.     TweenMax.set(elem, {
  22.       left: navigation.width() / 2 - navigationItem.width() / 2 - 10,
  23.       rotation: 90 + (index * 360 / navigationItem.length),
  24.       transformOrigin: "50% " + navigation.width() / 2 + "px"
  25.     });
  26.     TweenMax.set($(elem).find('.rotate-holder'), {
  27.       text: String(index * 360 / navigationItem.length)
  28.     });
  29.     TweenMax.set($(elem).find('.background-holder'), {
  30.       rotation: -90 - (index * 360 / navigationItem.length),
  31.     });
  32.   });
  33.   
  34.   // set tween values
  35.   function setTweenValues() {
  36.     rotation = Number($(this).find('.rotate-holder').text());
  37.   }
  38.  
  39.   // do tween
  40.   function doTween(target) {
  41.  
  42.     var targetIndex = navigationItem.index(target),
  43.       timeline = new TimelineMax();
  44.  
  45.     // add/remove class "active" from navigation & detail
  46.     navigationItem.each(function() {
  47.       $(this).removeClass('active');
  48.       if ($(this).index() == $(target).index()) {
  49.         $(this).addClass('active');
  50.       }
  51.     });
  52.     detailItem.each(function() {
  53.       $(this).removeClass('active');
  54.       if ($(this).index() == $(target).index()) {
  55.         $(this).addClass('active');
  56.       }
  57.     });
  58.  
  59.     timeline
  60.       .to(navigation, 0.6, {
  61.         rotation: -rotation + type,
  62.         transformOrigin: "50% 50%",
  63.         ease: Sine.easeInOut
  64.       })
  65.       .staggerTo(navigationItem.find('.background-holder'), 0.6, {
  66.         cycle: {
  67.           //function that returns a value
  68.           rotation: function(index, element) {
  69.             return -90 - Number($(element).prev('.rotate-holder').text()) + rotation + type;
  70.           }
  71.         },
  72.         transformOrigin: "50% 50%",
  73.         ease: Sine.easeInOut,
  74.       }, 0, '-=0.6')
  75.       .staggerFromTo($('.active').find('.letter'), 0.3, {
  76.         autoAlpha: 0,
  77.         x: -100,
  78.       },
  79.       {
  80.         autoAlpha: 1,
  81.         x: 0,
  82.         ease: Sine.easeInOut,
  83.       }, 0.025, '-=0.3')
  84.       .fromTo($('.active').find('.background'), 0.9, {
  85.         autoAlpha: 0,
  86.         x: -100,
  87.       },
  88.       {
  89.         autoAlpha: 1,
  90.         x: 0,
  91.         ease: Sine.easeInOut,
  92.       }, 0.05, '+=0.3');
  93.   }
  94.  
  95.   // click/hover on items
  96.   navigationItem.on('mouseenter', setTweenValues);
  97.   navigationItem.on('click', function() { doTween($(this)); })
  98.  
  99.   // on load show slideshow as well as first "active" navigation/detail item
  100.   TweenMax.to(slideshow, 1, { autoAlpha: 1 });
  101.   TweenMax.to($('.active').find('.letter'), 0.7, { autoAlpha: 1, x: 0 });
  102.   TweenMax.to($('.active').find('.background'), 0.7, { autoAlpha: 1, x: 0 });
  103.  
  104. });
  105.  
  106. // fast fix for resize window and refresh view, attention: not use in production, only for demo purposes!
  107. (function () {
  108. var width = window.innerWidth;
  109.  
  110. window.addEventListener('resize', function () {
  111.   if (window.innerWidth !== width) {
  112.     window.location.reload(true);
  113.   }
  114. });
  115. })();

预览截图

相关热词： 幻灯片全屏略图圆形旋转
上一篇：带渐变/滑动/翻转转换 自动幻灯片放映 cb幻灯片放映js
下一篇：启用触摸 图像/Iframe/画廊灯箱 jQuery NSB Box

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1