基于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. 解决Echarts封装成组件时只有最后一个才会缩放的问题

    参考了此文,并且强烈建议去看http://blog.csdn.net/crper/article/details/76091755 一般网上的方法都是 mounted() { this.drawCha ...

  2. SPOJ.TLE - Time Limit Exceeded(DP 高维前缀和)

    题目链接 \(Description\) 给定长为\(n\)的数组\(c_i\)和\(m\),求长为\(n\)的序列\(a_i\)个数,满足:\(c_i\not\mid a_i,\quad a_i\& ...

  3. Scrapy基础(五) ------css选择器基础

    基本语法: *                  选择所有节点#container         选择id为container的节点.container      选择所有class包含contai ...

  4. Linux搭建 SVN 服务器

    安装 Subversion Subversion 是一个版本控制系统,相对于的 RCS . CVS ,采用了分支管理系统,它的设计目标就是取代 CVS . yum install -y subvers ...

  5. 潭州课堂25班:Ph201805201 tornado 项目 第四课 增加用户注册登录(课堂笔记)

    tornado 相关说明 在 handlers 中创建个 auth.py 用来做用户登录,在这文件中创建个类,并逐步完善 在 tornado 中创建 login.html 文件,是个登录页面 {% e ...

  6. mongodb数据导入导出

    1.导出: 2.导入: 注意headline,导入一定要跳过第一行,第一行是列名

  7. 登录页面加密token和盐的作用

    盐: 可以说盐是作用于注册,盐就是将用户输入的原始密码,加密后存进数据库,然后把盐(实际上是随机字符串)也存进数据库 Map<String, String> map = new HashM ...

  8. Ubuntu1404安装eclipse(目的是为了运行python,当然java更可以)

    原创文章,不得转载 我是彩印网(www.caiyin.com) 的技术开发人员,在这里首先请允许我做下业务的介绍 彩印网是由北京出彩电子商务有限公司运营的专业印刷电商,集线上购物.支付.设计.制作.配 ...

  9. ‘百度杯’十月场web ---login

    首先一看的题,既然是是web类的,就要查看源码,一看,最先有一行注释,估摸着是用户名和密码 果然登录上去了,显示一段乱码,源码也没有什么东西, 那就抓一次包吧 发现响应头里边有个show:0的响应,而 ...

  10. python标准库大全(转)

    3. 清晰的标准库大全,带例子 2. 必会标准库 http://lizhenliang.blog.51cto.com/7876557/1872538 1. 标准库大全,链接版 http://blog. ...