基于jQuery雷达扫描切换幻灯片代码。这是一款切换效果类似雷达扫描,支持鼠标滚轮滚动切换。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <div class="scene">
<!-- page start -->
<div class="page page-1 active">
<div class="page--rotater"></div>
<div class="page--content">
<!--<h1>Page 1</h1>-->
<header class="htmleaf-header">
<script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>
</header>
</div>
</div>
<!-- page end -->
<!-- page start -->
<div class="page page-2">
<div class="page--rotater"></div>
<div class="page--content">
<h1>Page 2</h1>
</div>
</div>
<!-- page end -->
<!-- page start -->
<div class="page page-3">
<div class="page--rotater"></div>
<div class="page--content">
<h1>Page 3</h1>
</div>
</div>
<!-- page end -->
<!-- page start -->
<div class="page page-4">
<div class="page--rotater"></div>
<div class="page--content">
<h1>Page 4</h1>
</div>
</div>
<!-- page end -->
<!-- page start -->
<div class="page page-5">
<div class="page--rotater"></div>
<div class="page--content">
<h1>Page 5</h1>
</div>
</div>
<!-- page end -->
<div class="rt-point">
<span class="page-number page-number-1 active">1</span>
<span class="page-number page-number-2">2</span>
<span class="page-number page-number-3">3</span>
<span class="page-number page-number-4">4</span>
<span class="page-number page-number-5">5</span>
</div>
<!-- footer start -->
<div class="footer">
<div class="nav">
<ul>
<li class="nav--btn nav--btn-1 active" data-page="1"></li>
<li class="nav--btn nav--btn-2" data-page="2"></li>
<li class="nav--btn nav--btn-3" data-page="3"></li>
<li class="nav--btn nav--btn-4" data-page="4"></li>
<li class="nav--btn nav--btn-5" data-page="5"></li>
</ul>
</div>
</div>
<!-- footer end -->
</div>

via:http://www.w2bc.com/article/54652

jQuery雷达扫描切换幻灯片代码的更多相关文章

  1. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  2. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. jquery写tab切换,三行代码搞定

    <script type="text/javascript"> $("button").on("click",function( ...

  4. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  5. jQuery旋转木马仿3D效果的图片切换特效代码

    用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...

  6. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  7. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  8. 14种网页jQuery和css3特效插件代码演示

    1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQue ...

  9. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

随机推荐

  1. [OC] Block的使用

    由ControllerA跳转到controllerB,在controllerB中选择一个参数的值,并将它传回给controllerA. 首先,在controllerB的.h文件中写入: @interf ...

  2. 潭州课堂25班:Ph201805201 django 项目 第九课 图片验证码前台实现,判断用户是否注册功能实现 (课堂笔记)

    u胎代码实现 : 针对每一个 app 写个 js 脚本, 先给 users 的 app 应用创建个 js:在指定目录下的 js 文件夹下,创建 users 文件夹,下创建 suth.js ,图片验证 ...

  3. 如何绘制UML图?

    首先推荐在线绘制UML的网址:https://www.processon.com/,很好用. 在软件开发过程中,开发人员往往需要通过绘制类图来理清业务的实现思路,从而方便代码实现,也便于后期的代码维护 ...

  4. Android @id和@+id区别

    Android中的组件需要用一个int类型的id属性值来表示.id属性只能接受资源类型的值,也就是必须以@开头的值,例如,@id/abc.@+id/xyz等.如果在@后面使用“+”,表示当修改完某个布 ...

  5. Mac使用Xcode配置openGL

    Mac使用Xcode配置openGL 博主这学期有图形学课要用到OpenGL,于是首先就开始配置开发环境了.应该说网上Windows上配置OpenGL教程比较多,Mac版的比较少.博主特来分享配置过程 ...

  6. ionic2 处理android硬件返回按钮

    问题 注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好,所以有几种方法: 1.实现按返回键最小化应用(最小化应用需要装cordova-plugin-appminim ...

  7. 100405之python程序安装

    Python的安装 注意安装的path和.exe可执行文件的命名方式 例如py2或者py3 sublime的安装 一.Sublime Text 3安装(64位Windows操作系统): 1.双击 Su ...

  8. C#_02.15_基础六_.NET类

    C#_02.15_基础六_.NET类 一.类继承是一个类在另一个类的基础上进行的扩展. 继承的子类拥有父类的全部成员.索引子类拥有本身的全部成员以及父类的全部成员. 可以对基类成员进行隐藏,如果必须的 ...

  9. Spring(2)—IOC

    一.Spring IOC是什么 1.简述 Spring是一个开源框架 Spring为简化企业级应用开发而生,使用Spring可以使简单的JavaBean实现以前只有EJB才能实现的功能 Spring是 ...

  10. 使用js冒泡实现点击空白处关闭弹窗

    什么是事件冒泡? 如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶 ...