jQuery圆形轮播图插件circleCarousel

所属分类:媒体-幻灯片和轮播图,图片展示

 29280  339  查看评论 (4)
分享到微信朋友圈
X
jQuery圆形轮播图插件circleCarousel ie兼容11

使用方法

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

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/circle.js"></script>
<link rel="stylesheet" href="css/circle.css">

HTML结构

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

<div>
    <div>
        <span data-tab="1">
     Item 1
     <span ></span>
        </span>
        <span data-tab="2">
     Item 2
     <span ></span>
        </span>
        <span data-tab="3">
     Item 3
     <span ></span>
        </span>
        <span data-tab="4">
     Item 4
     <span ></span>
        </span>
        <span data-tab="5">
     Item 5
     <span ></span>
        </span>
        ...
    </div>

    <div>
        <div>
            TEXT SAMPLE FOR ITEM 1
        </div>
        <div>
            TEXT SAMPLE FOR ITEM 2
        </div>
        <div>
            TEXT SAMPLE FOR ITEM 3
        </div>
        <div>
            TEXT SAMPLE FOR ITEM 4
        </div>
        <div>
            TEXT SAMPLE FOR ITEM 5
        </div>
    </div>

</div>
相关插件-幻灯片和轮播图,图片展示

55bbs首页轮播图效果

jQuery实现55bbs首页轮播图效果
  幻灯片和轮播图
 32070  349

原生js实现轮播插件(支持左右箭头、圆点按钮、兼容IE8)(原创)

支持左右箭头、圆点按钮、代码注释全、可控效果按钮接口、简单语法、兼容IE8
  幻灯片和轮播图
 30009  300

原生js轮播图炸裂切换效果

原生js写的图片炸裂轮播图
  幻灯片和轮播图
 24707  313

纯CSS全屏轮播滑块

用CSS制作交互式滑块,这是可能的,没有使用任何JavaScript。在这里下面教程告诉你如何使纯CSS不使用jQuery或基于JavaScript来创建全屏滑块。
  幻灯片和轮播图
 49476  404

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    A/Service ? restart 0
    2021/3/3 9:26:45
    大神,如何调整自动旋转的时间? 回复
    钱志强 0
    2019/3/29 16:03:31
    转一圈的,太厉害,感觉屏幕都在抖啊~体验很差啊 回复
    0
    2019/1/22 20:05:31
    有个顿闪bug 应该是有分辨率问题
        sohopeter0
        2019/1/23 15:40:08
        哦,那研究一下,不断更新
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复