基于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. vs各种版本

    文件名称 文件大小 百度网盘下载 微软官方下载 Visual Studio 2015 Enterprise - 企业版 - 简体中文 3.89GB http://pan.baidu.com/s/1bn ...

  2. 拓扑排序 --- AtCode - 3596

    题目链接: https://cn.vjudge.net/problem/1137733/origin 拓扑排序的基本思想: https://blog.csdn.net/qq_41713256/arti ...

  3. 洛谷.3369.[模板]普通平衡树(fhq Treap)

    题目链接 第一次(2017.12.24): #include<cstdio> #include<cctype> #include<algorithm> //#def ...

  4. [AHOI2009]维护序列

    OJ题号:洛谷2023.BZOJ1798 思路: 参见[洛谷3373][模板]线段树 2 #include<cstdio> #include<cctype> #include& ...

  5. vue的生存周期

    钩子函数 created 实例已经创建 befoCompile 编译之前 compiled 编译之后 ready 插入到文档 beforeDestroy 销毁之前 destroyed 销毁之后

  6. acm--博弈入门1(巴什博弈1)--(HDU 1846 HDU 2049)

    一开始听大佬讲巴什博弈,听成巴士博弈,后来知道了巴什博弈的大名,还知道了博弈不止一种.所谓博弈,就是一场心机的对抗. 好巴什,好巴什......(记得有一个广告语是这么来着) 切入正题: 巴什博弈,问 ...

  7. BZOJ4432 : [Cerc2015]Greenhouse Growth

    对于高度相同的一段可以合并,用链表从左往右维护这些连续段,每段维护以下信息: $l,r$:表示区间的左右端点. $t,a$:表示在第$t$天结束时它的高度是$a$. $b$:当阳光在左边时它是否会长高 ...

  8. shell脚本使用技巧4--读取字符,重复执行

    ls | cat -n > out.txt 给输出的信息加行号并导出到out.txt 利用shell生成一个独立的进程 pwd; (cd /bin; ls); pwd; 开启一个子shell,不 ...

  9. Nginx (安装+ 配置域名+ 访问认证 +发布文件)

    一.Nginx介绍: Nginx是一款高性能的HTTP和反向代理服务器,能够选择高效的epoll(linux2.6内核).kqueue(freebsd).eventport(solaris10)作为网 ...

  10. HTML5 — 地理定位

    Geolocation:地理定位,获取当前浏览器所在的地理坐标信息(包括经度.纬度.海拔高度.移动速度),实现LBS应用(Location Based Service)——基于定位的服务,如订   餐 ...