幻灯片/轮播

CircleCarousel - 圆形轮播图jQuery插件

阿里云


circleCarousel 是一款 jQuery 圆形轮播图插件。该 jQuery 圆形轮播图插件能够生成一组围绕中心旋转的圆形轮播图,点击图片时会有炫酷的旋转动画。

使用方法

在页面中引入 jquery、circle.js 和 circle.css 文件。

也想出现在这里?联系我们
创客主机
  1. <script src="path/to/jquery.min.js"></script>
  2. <script src="path/to/circle.js"></script>
  3. <link rel="stylesheet" href="css/circle.css">

HTML 结构

该 jQuery 圆形轮播图的 HTML 结构如下。

  1. <div class="holderCircle">
  2.   <div class="dotCircle">
  3.     <span class="itemDot active itemDot1" data-tab="1">
  4.       Item 1
  5.       <span class="forActive"></span>
  6.     </span>
  7.     <span class="itemDot itemDot2" data-tab="2">
  8.       Item 2
  9.       <span class="forActive"></span>
  10.     </span>
  11.     <span class="itemDot itemDot3" data-tab="3">
  12.       Item 3
  13.       <span class="forActive"></span>
  14.     </span>
  15.     <span class="itemDot itemDot4" data-tab="4">
  16.       Item 4
  17.       <span class="forActive"></span>
  18.     </span>
  19.     <span class="itemDot itemDot5" data-tab="5">
  20.       Item 5
  21.       <span class="forActive"></span>
  22.     </span>
  23.     ...
  24.   </div>
  25.  
  26.   <div class="contentCircle">
  27.  
  28.     <div class="CirItem active CirItem1">
  29.       TEXT SAMPLE FOR ITEM 1
  30.     </div>
  31.     <div class="CirItem CirItem2">
  32.       TEXT SAMPLE FOR ITEM 2
  33.     </div>
  34.     <div class="CirItem CirItem3">
  35.       TEXT SAMPLE FOR ITEM 3
  36.     </div>
  37.     <div class="CirItem CirItem4">
  38.       TEXT SAMPLE FOR ITEM 4
  39.     </div>
  40.     <div class="CirItem CirItem5">
  41.       TEXT SAMPLE FOR ITEM 5
  42.     </div>
  43.   </div>
  44.  
  45. </div>

Github 地址:https://github.com/nasirfarhadi92/circleCarousel

CircleCarousel - 圆形轮播图 jQuery 插件

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

演示地址 下载地址
收藏
(0)

发表回复

热销模板

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

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