基于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. 56.两数之和.md

    描述 给一个整数数组,找到两个数使得他们的和等于一个给定的数 target. 你需要实现的函数twoSum需要返回这两个数的下标, 并且第一个下标小于第二个下标.注意这里下标的范围是 0 到 n-1. ...

  2. Django Simple Captcha插件

    正文开始 先看官方描述 1.安装 打开控制台,输入如下: pip install django-simple-captcha 2.把APP添加到Django项目进入自己的Django项目,在setti ...

  3. BZOJ.3591.最长上升子序列(状压DP)

    BZOJ 题意:给出\(1\sim n\)的一个排列的一个最长上升子序列,求原排列可能的种类数. \(n\leq 15\). \(n\)很小,参照HDU 4352这道题,我们直接把求\(LIS\)时的 ...

  4. 潭州课堂25班:Ph201805201 django 项目 第十五课 用户注册功能后台实现 (课堂笔记)

    前台:判断用户输入 ,确认密码,手机号, 一切通过后向后台发送请求, 请求方式:post 在 suers 应用下的视图中: 1,创建个类, 2,创建 GET 方法,宣言页面 3,创建  POST 方法 ...

  5. C++程序设计方法6:算法横向拆分

    例子1:负载监视器,如何在一个程序中实现对这些不同条件的适应呢? int main() { WindowDisplay display; Monitor monitor(&display); ...

  6. C# Socket网络编程精华篇 (转)

    http://www.cnblogs.com/weilengdeyu/archive/2013/03/08/2949101.html 我们在讲解Socket编程前,先看几个和Socket编程紧密相关的 ...

  7. css3实现不同的loading

    样式1: <html> <head> <style type="text/css"> .loading { position: fixed; t ...

  8. 概率图模型 基于R语言 这本书中的第一个R语言程序

    概率图模型 基于R语言 这本书中的第一个R语言程序 prior <- c(working =0.99,broken =0.01) likelihood <- rbind(working = ...

  9. 转 asp.net mvc 身份验证中返回绝对路径的ReturnUrl

    原文:http://www.cnblogs.com/hyl8218/archive/2011/11/22/2259116.html 从HttpUnauthorizedResult的源码可以看出,Htt ...

  10. sqoop导出到hdfs

    ./sqoop export --connect jdbc:mysql://192.168.58.180/db --username root --password 123456  --export- ...