基于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. JAVA中final修饰符小结

    一.final关键字可以用来修饰类.方法.变量.各有不同. A.修饰类(class).      1.该类不能被继承.      2.类中的方法不会被覆盖,因此默认都是final的.      3.用 ...

  2. [OC] 使用 cocoaPods 导入 AFNetworking

    AFNetworking的GitHub地址: https://github.com/AFNetworking/AFNetworking 假设我们建立了一个叫做AFNWlearning的工程. 1.打开 ...

  3. [Python]mysql-python 安装错误 fatal error C1083: Cannot open include file: 'config-win.h': No such file or directory

    需要安装mysql connector 前往 https://dev.mysql.com/downloads/connector/python/ 下载 选择Platform independence, ...

  4. python基础一 ------可迭代对象和迭代器对象

    可迭代对象和迭代器对象:前者生成后者 比喻:10个硬币都可以一一数(迭代),放入到存钱罐(可以取钱的那种),那这个存钱罐就是一个迭代器对象 需求:从网络抓取各个城市气温信息,并依次显示若依次抓取较多的 ...

  5. GDOI2017爆炸记

    100种方法教你爆零.. 总结 其实这一次比赛除了三个sb的错误还是收获到了很多的.. 起码自己已经知道自己有进队的实力 不足的地方很大 主要是脑子不太好使,题目要不只能拿最暴力的分要不就能a 看了很 ...

  6. 微信小程序-转发

    仅供参考 1,js: onShareAppMessage(res) { return { title: '我在使用俺搜·找客户,10万+材料人都在用,就差你了', path: '/pages/inde ...

  7. JDBC(12)—DBUtils工具类

    DBUtils:commons-dbutils是Apache组织提供的一个开源JDBC工具库,它是对JDBC的简单封装,并且使用dbutils会极大的简化jdbc编码的工作量,同时不会影响到程序的性能 ...

  8. [原创]浅谈移动互联网App兼容性测试

    [原创]浅谈移动互联网App兼容性测试 今天要谈的话题,估计各位测试都有感受,移动互联网App兼容性测试,我们到底测试覆盖如何去挑选机型?具体移动App兼容性测试如何开展?是不是应引进像testin这 ...

  9. Linux脚本程序

    #!/bin/bash # array-ops.sh: 数组更多有趣的用法. array=( zero one two three four five ) # 元素 ]} # zero } # zer ...

  10. 3DES 加、解密

    package com.suning.hrqz.utils; import java.io.UnsupportedEncodingException; import java.security.Mes ...