jQuery圆形轮播图插件circleCarousel

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

 31315  341  查看评论 (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>
相关插件-幻灯片和轮播图,图片展示

jQuery响应式全屏轮播插件royalslider.js

全屏轮播插件可放大缩小,支持触控,移动端使用,本插件为收费插件,特意整理出来的
  幻灯片和轮播图
 50518  373

响应式banner,带手指换的特效,自定义设置属性

响应式banner,支持移动端手指滑动切换,自定义设置属性
  幻灯片和轮播图
 54866  515

原声 JS + Jquery + 面向对象轮播图

几个效果的轮播图,最后组成个组件效果,可供学习
  幻灯片和轮播图
 44252  392

jQuery带缩略图轮播图插件SliderPro

jQuery基于SliderPro实现的左右布局带缩略图轮播图效果
  幻灯片和轮播图
 47003  453

讨论这个项目(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
        哦,那研究一下,不断更新
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复