全屏圆形导航轮播图布局jQuery特效

创客云


这是一款jQuery全屏圆形导航轮播图布局特效。该特效在页面左侧是一个圆形旋转的导航,点击导航缩略图时,会全屏切换对应的大图。

使用方法

在页面中引入下面的文件。

  1. <link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
  2. <script src="assets/js/jquery-1.11.0.min.js"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
  4. <script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/TextPlugin.min.js"></script>
  7. <script src="assets/js/demo.js"></script>

HTML结构

  1. <div class="loader">
  2.   <div class="lds-ripple">
  3.     <div></div>
  4.     <div></div>
  5.   </div>
  6. </div>
  7. <section class="slideshow">
  8.   <ul class="navigation">
  9.     <li class="navigation-item active">
  10.       <span class="rotate-holder"></span>
  11.       <span class="background-holder" style="background-image: url(assets/img/img-1.jpeg);"></span>
  12.     </li>
  13.     <li class="navigation-item">
  14.       <span class="rotate-holder"></span>
  15.       <span class="background-holder" style="background-image: url(assets/img/img-2.jpeg);"></span>
  16.     </li>
  17.     <li class="navigation-item">
  18.       <span class="rotate-holder"></span>
  19.       <span class="background-holder" style="background-image: url(assets/img/img-3.jpeg);"></span>
  20.     </li>
  21.     <li class="navigation-item">
  22.       <span class="rotate-holder"></span>
  23.       <span class="background-holder" style="background-image: url(assets/img/img-4.jpeg);"></span>
  24.     </li>
  25.     <li class="navigation-item">
  26.       <span class="rotate-holder"></span>
  27.       <span class="background-holder" style="background-image: url(assets/img/img-5.jpeg);"></span>
  28.     </li>
  29.     <li class="navigation-item">
  30.       <span class="rotate-holder"></span>
  31.       <span class="background-holder" style="background-image: url(assets/img/img-6.jpeg);"></span>
  32.     </li>
  33.     <li class="navigation-item">
  34.       <span class="rotate-holder"></span>
  35.       <span class="background-holder" style="background-image: url(assets/img/img-7.jpeg);"></span>
  36.     </li>
  37.     <li class="navigation-item">
  38.       <span class="rotate-holder"></span>
  39.       <span class="background-holder" style="background-image: url(assets/img/img-8.jpeg);"></span>
  40.     </li>
  41.     <li class="navigation-item">
  42.       <span class="rotate-holder"></span>
  43.       <span class="background-holder" style="background-image: url(assets/img/img-9.jpeg);"></span>
  44.     </li>
  45.   </ul>
  46.   <div class="detail">
  47.     <div class="detail-item active">
  48.       <div class="headline">Amsterdam</div>
  49.       <div class="background" style="background-image: url(assets/img/img-1.jpeg)"></div>
  50.     </div>
  51.     <div class="detail-item">
  52.       <div class="headline">Rome</div>
  53.       <div class="background" style="background-image: url(assets/img/img-2.jpeg);"></div>
  54.     </div>
  55.     <div class="detail-item">
  56.       <div class="headline">Paris</div>
  57.       <div class="background" style="background-image: url(assets/img/img-3.jpeg);"></div>
  58.     </div>
  59.     <div class="detail-item">
  60.       <div class="headline">Prague</div>
  61.       <div class="background" style="background-image: url(assets/img/img-4.jpeg);"></div>
  62.     </div>
  63.     <div class="detail-item">
  64.       <div class="headline">Moscow</div>
  65.       <div class="background" style="background-image: url(assets/img/img-5.jpeg);"></div>
  66.     </div>
  67.     <div class="detail-item">
  68.       <div class="headline">Kyoto</div>
  69.       <div class="background" style="background-image: url(assets/img/img-6.jpeg);"></div> 
  70.     </div>
  71.     <div class="detail-item">
  72.       <div class="headline">Sydney</div>
  73.       <div class="background" style="background-image: url(assets/img/img-7.jpeg);"></div>
  74.     </div>
  75.     <div class="detail-item">
  76.       <div class="headline">Istanbul</div>
  77.       <div class="background" style="background-image: url(assets/img/img-8.jpeg);"></div>
  78.     </div>
  79.     <div class="detail-item">
  80.       <div class="headline">Hong Kong</div>
  81.       <div class="background" style="background-image: url(assets/img/img-9.jpeg);"></div>
  82.     </div>
  83.   </div>
  84. </section>

Github网址:https://github.com/COIDEAwebsite/slideshow-with-animated-circular-navigation

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/46986.html
云模板

发表评论