效果：http://hovertree.com/texiao/jqimg/3/

本效果使用 jquery-1.8.3.min.js,如需使用1.12.3版本，需进行修改。

全部版本jQuery下载:http://hovertree.com/h/bjaf/ati6k7yk.htm

每个轮播界面由若干图组成，图片随轮播动态载入，成为动画。

下载：http://hovertree.com/h/bjaf/8tum0nci.htm

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery焦点图 - 何问起</title>

<link rel="stylesheet" href="http://hovertree.com/texiao/jqimg/3/css/style.css" />

<style>.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue}</style>

<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="http://hovertree.com/texiao/jqimg/3/js/jquery.DB_tabMotionBanner.min.js"></script>

</head>

<body>

<div class="DB_tab25">

<ul class="DB_bgSet">

<li style="background: #e67373;"></li>

<li style="background: #86cccc;"></li>

<li style="background: #ffebb3;"></li>

<!--<li style="background: url(images/stu_banner2.jpg) no-repeat 100% 100%;"></li>-->

</ul>

<ul class="DB_imgSet">

<li onclick="javascript: window.location.href = 'http://hovertree.com/';">

<img class="DB_1_1" src="http://hovertree.com/texiao/jqimg/3/images/stuimg1_1.png" alt="" />

<img class="DB_1_2" src="http://hovertree.com/texiao/jqimg/3/images/stuimg1_2.png" alt="" />

<img class="DB_1_3" src="http://hovertree.com/texiao/jqimg/3/images/stuimg1_3.png" alt="" />

</li>

<li onclick="javascript: window.location.href = 'http://hovertree.com/texiao/';">

<img class="DB_2_1" src="http://hovertree.com/texiao/jqimg/3/images/stuimg2_1.png" alt="" />

<img class="DB_2_2" src="http://hovertree.com/texiao/jqimg/3/images/stuimg2_2.png" alt="" />

<img class="DB_2_3" src="http://hovertree.com/texiao/jqimg/3/images/stuimg2_3.png" alt="" />

</li>

<li onclick="javascript: window.location.href = 'http://keleyi.com/';">

<img class="DB_3_1" src="http://hovertree.com/texiao/jqimg/3/images/stuimg3_1.png" alt="" />

<img class="DB_3_2" src="http://hovertree.com/texiao/jqimg/3/images/stuimg3_2.png" alt="" />

<img class="DB_3_3" src="http://hovertree.com/texiao/jqimg/3/images/stuimg3_3.png" alt="" />

</li>

</ul>

<div class="DB_menuWrap">

<ul class="DB_menuSet">

<li>

<img src="http://hovertree.com/texiao/jqimg/3/images/btn_off.png" alt="" />

</li>

<li>

<img src="http://hovertree.com/texiao/jqimg/3/images/btn_off.png" alt="" />

</li>

<li>

<img src="http://hovertree.com/texiao/jqimg/3/images/btn_off.png" alt="" />

</li>

</ul>

<div class="DB_next">

<img src="http://hovertree.com/texiao/jqimg/3/images/nextArrow.png" alt="NEXT" />

</div>

<div class="DB_prev">

<img src="http://hovertree.com/texiao/jqimg/3/images/prevArrow.png" alt="PREV" />

</div>

</div>

</div>

<div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/76i9j790.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div>

<script type="text/javascript">

$('.DB_tab25').DB_tabMotionBanner({

key: 'b28551',

autoRollingTime: 6000,

bgSpeed: 500,

motion: {

DB_1_1: { left: -50, opacity: 0, speed: 1000, delay: 500 },

DB_1_2: { left: -50, opacity: 0, speed: 1000, delay: 1000 },

DB_1_3: { left: 100, opacity: 0, speed: 1000, delay: 1500 },

DB_2_1: { top: 50, opacity: 0, speed: 1000, delay: 500 },

DB_2_2: { top: 50, opacity: 0, speed: 1000, delay: 1000 },

DB_2_3: { top: 100, opacity: 0, speed: 1000, delay: 1500 },

DB_3_1: { left: -50, opacity: 0, speed: 1000, delay: 500 },

DB_3_2: { top: 50, opacity: 0, speed: 1000, delay: 1000 },

DB_3_3: { top: 0, opacity: 0, speed: 1000, delay: 1500 },

end: null

}

})

</script>

</body>

</html>

可以通过修改motion 中的数据，改变动画方式等。

转自：http://hovertree.com/h/bjaf/76i9j790.htm

特效库：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery全屏动画焦点图的更多相关文章

  1. jQuery全屏图片焦点图

    在线演示 本地下载

  2. jQuery宽屏游戏焦点图

    在线演示 本地下载

  3. 全新jquery多点滑动幻灯片——全屏动画animateSlide

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...

  4. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  5. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  6. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  7. 如何给PDF设置全屏动画

    PPT文件可以播放全屏,并且可以实现飞入.分割.闪烁等动画模式播放.那么PDF文件可以吗?我们想要给PDF文件加入动画效果应该怎么做呢,也有很多的小伙伴不知道该怎么把PDF文件切换为全屏动画模式想要知 ...

  8. 基于jQuery全屏相册插件zoomVisualizer

    基于jQuery全屏相册插件zoomVisualizer.这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片.效果图如下: 在线预览    ...

  9. 可嵌入图片视频jQuery全屏滑块

    分享一款可嵌入图片视频jQuery全屏滑块.这是一款可定制的滑块幻灯片代码,支持键盘箭头切换.效果图如下: 在线预览   源码下载 实现的代码. html代码:     <script type ...

随机推荐

  1. 在Android上使用qemu-user运行可执行文件

    在Android上使用qemu-user运行可执行文件 作者:寻禹@阿里聚安全 前言 QEMU简要介绍: QEMU可以解释执行可执行程序.既然QEMU可以解释执行可执行程序,那么QEMU就能够知道执行 ...

  2. Android安全开发之浅谈密钥硬编码

    Android安全开发之浅谈密钥硬编码 作者:伊樵.呆狐@阿里聚安全 1 简介 在阿里聚安全的漏洞扫描器中和人工APP安全审计中,经常发现有开发者将密钥硬编码在Java代码.文件中,这样做会引起很大风 ...

  3. 常用SQL[ORACLE]

        1.常用系统函数 2.常用sql语句 3.一些定义和关键字 4.需要注意点   1.常用系统函数 ↑ --decode decode(column,if_value,value,elseif_ ...

  4. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  5. 剑指Offer面试题：33.二叉树的深度

    一.题目一:二叉树的深度 1.1 题目说明 题目一:输入一棵二叉树的根结点,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度.例如下图中的二叉树的 ...

  6. 一个小白App开发需要了解的基本技术

    本文针对小白用户对App做一个简单的介绍,首先要了解App都有哪些类型,不同的类型适用于哪些需求,用户可以根据自己的需求选择不同的App开发. 一 App有哪些形式 WebApp:简单来说,Web A ...

  7. 清晰易懂TCP通信原理解析（附demo、简易TCP通信库源码、解决沾包问题等）C#版

    目录 说明 TCP与UDP通信的特点 TCP中的沾包现象 自定义应用层协议 TCPLibrary通信库介绍 Demo演示 未完成功能 源码下载 说明 我前面博客中有多篇文章讲到了.NET中的网络编程, ...

  8. CCLuaLoadChunksFromZIP加载后的require路径问题

    对于require来说,在LUA中的机制就是搜索path路径了.但对于CCLuaLoadChunksFromZIP加载的LUA文件来说,require的路径又是怎么样的呢? 我在服务器上有一个 oox ...

  9. chunkupload 文件上传断点续传组件(java) - 正式发布

    chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. chunkupload实现如下功能: ·  实现断点续传 ·  ...

  10. TODO：小程序手机预览调试

    TODO:小程序手机预览调试 1. 小程序注册,目前还未开通个人注册,主体类型为企业.政府.媒体.其他组织 2. 登录小程序,绑定开发者,获取AppID 3. 下载微信小程序示例-新片预告 https ...