效果：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. 使用Gemini构建自己的IDE

    你的项目中的领域特定语言是否需要自己的IDE?Visual Studio Shell是选择之一,但是过于庞大不易部署,而且很难使用.Tim Jones的Gemini框架是一个轻量级替代方案. Gemi ...

  2. 夜深了，写了个JQuery的省市区三级级联效果

    刚刚练手的JQuery,希望大神们指正 主要实现以下功能: 1.三级菜单级联加载数据 2.可以在不操作脚本的情况下,给元素加属性实现级联功能 3.自定义动态显示数据 咨询问题: 对于一般比较固定不变的 ...

  3. python自动化测试（4）-使用第三方python库技术实现

    python自动化测试(4)-使用第三方python库技术实现 1   概述 关于测试的方法论,都是建立在之前的文章里面提到的观点: 功能测试不建议做自动化 接口测试性价比最高 接口测试可以做自动化 ...

  4. 给Mac OS X的“逻辑宗卷组”改名

    近日更新了Mac OS X的10.10版本——Yosemite,感觉良好,但当我在打开磁盘工具的时候发现了一个美中不足的地方,磁盘宗卷组的名字居然还是我之前的“Mavericks”,如图: 如何对它进 ...

  5. CoreData教程

    网上关于CoreData的教程能搜到不少,但很多都是点到即止,真正实用的部分都没有讲到,而基本不需要的地方又讲了太多,所以我打算根据我的使用情况写这么一篇实用教程.内容将包括:创建entity.创建r ...

  6. c#语言-高阶函数

    介绍 如果说函数是程序中的基本模块,代码段,那高阶函数就是函数的高阶(级)版本,其基本定义如下: 函数自身接受一个或多个函数作为输入. 函数自身能输出一个函数,即函数生产函数. 满足其中一个条件就可以 ...

  7. C#设计模式之观察者

    Iron之观察者 引言 上一篇说的职责链模式,很有意思的一个模式,今天这个模式也是很有意思的一个模式,还是不啰嗦了直接进入主题吧. 场景介绍:在上一遍中说到用到部件检测,很巧妙的让调用者和处理者解耦了 ...

  8. C#设计模式-原型模式

    在软件系统中,当创建一个类的实例的过程很昂贵或很复杂,并且我们需要创建多个这样类的实例时,如果我们用new操作符去创建这样的类实例,这未免会增加创建类的复杂度和耗费更多的内存空间,因为这样在内存中分配 ...

  9. Linux核心源码阅读方法

    首次阅读Linux4.0.5内核源代码时,一脸茫然,它的代码不仅复杂,而且庞大,找不到从哪里开始阅读. 通常Linux会有以下目录 arch 子目录包括所有和体系结构相关的核心代码.它还有更深的子目录 ...

  10. Java基础-输入输出-3.编写BinIoDemo.java的Java应用程序，程序完成的功能是：完成1.doc文件的复制，复制以后的文件的名称为自己的学号姓名.doc。

    3.编写BinIoDemo.java的Java应用程序,程序完成的功能是:完成1.doc文件的复制,复制以后的文件的名称为自己的学号姓名.doc. try { FileInputStream in = ...