分享一款基于jQuery上下切换的焦点图,这款焦点图带有缩略图悬浮,它的切换效果比较简单,仅仅是作图片的上下切换,但是效果还是比较流畅的。这款jQuery焦点图插件的另外一个特点是在播放器上面可以悬浮缩略图,点击缩略图也可以播放图片。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

  <div id="banner">
<div class="banner">
<ul>
<li>
<img src="data:images/banner_1.jpg" /></li>
<li>
<img src="data:images/banner_2.jpg" /></li>
<li>
<img src="data:images/banner_3.jpg" /></li>
</ul>
</div>
<div class="bannNav">
<a href="#">
<h1>
水龙头</h1>
<h2>
THE TAP</h2>
<img src="data:images/bannav_2.jpg" />
<h3 class="time1">
&nbsp;</h3>
</a><a href="#">
<h1>
直杆淋浴</h1>
<h2>
SHOWER</h2>
<img src="data:images/bannav_2.jpg" />
<h3 class="time1">
&nbsp;</h3>
</a><a href="#">
<h1>
浴室镜子</h1>
<h2>
MIRROR</h2>
<img src="data:images/bannav_4.jpg" />
<h3 class="time1">
&nbsp;</h3>
</a>
</div>
</div>

via:http://www.w2bc.com/Article/20797

基于jQuery上下切换的焦点图—带缩略图悬浮的更多相关文章

  1. 基于jQuery果冻式按钮焦点图切换代码

    基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  2. 一款jQuery满屏自适应焦点图切换特效

    一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...

  3. 一款基于的jQuery仿苹果样式焦点图插件

    这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...

  4. jQuery 3D圆盘旋转焦点图 支持鼠标滚轮

    之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片.另外,这款jQuery 3D ...

  5. 基于js全屏动画焦点图幻灯片

    今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="sl ...

  6. 基于jQuery的宽屏可左右切换的焦点图插件

    之前分享了很多实用的jQuery焦点图插件,大家可以看看.今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片.效果图如下: 在线预览   源码 ...

  7. 基于jquery多种切换效果的焦点图(兼容ie6)

    随着html5和css3的诞生.各种非常酷.非常炫的网页焦点图在各个前端技术网上满天飞.基于html5和css3技术的焦点图有一个弊端就是要在ie9以上才支持.这让需兼容ie6到ie8的页面又爱又恨. ...

  8. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  9. 好用的切换滑动焦点图框架jquery.superslide

    拿到学习网站:http://www.superslide2.com/

随机推荐

  1. Windows Server 2003单网卡搭建VPN

    Windows Server 2003单网卡搭建VPN   1.打开[控制面板] --> [管理工具] --> [路由和远程访问] 2.鼠标右击你要管理的电脑 在弹出式菜单中选中[配置并启 ...

  2. HBase高性能复杂条件查询引擎---二级多列索引

    http://www.infoq.com/cn/articles/hbase-second-index-engine 原理 “二级多列索引”是针对目标记录的某个或某些列建立的“键-值”数据,以列的值为 ...

  3. C++builder XE10 终于支持类内变量初始化了

    Win32终于支持类内变量初始化了,C++11 用bcc32C编译器  llvm CLang.还支持Unicode 中文汉字 变量名. 用经典的bcc32编译还是不支持! class TPerson ...

  4. cocos2d-x 3.2 DrawNode 绘图API

    关于Cocos2d-x 3.x 版本的绘图方法有两种: 1.使用DrawNode类绘制自定义图形. 2.继承Layer类重写draw()方法. 以上两种方法都可以绘制自定义图形,根据自己的需要选择合适 ...

  5. [翻译]创建ASP.NET WebApi RESTful 服务(8)

    本章讨论创建安全的WebApi服务,到目前为止,我们实现的API都是基于未加密的HTTP协议,大家都知道在Web中传递身份信息必须通过HTTPS,接下来我们来实现这一过程. 使用HTTPS 其实可以通 ...

  6. Codeforces 660 C. Hard Process (尺取)

    题目链接:http://codeforces.com/problemset/problem/660/C 尺取法 #include <bits/stdc++.h> using namespa ...

  7. ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)

    PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...

  8. VS2010 用WebBrowser控件 无响应

    问题:偶尔我遇到这个问题,不知怎么的,拖放这个web控件它就卡死,无法响应,其他应用程序没有影响,任务管理器显示无法响应. 解决:原来是有道翻译的问题,具体为什么不清楚,只要一打开有道翻译,用web控 ...

  9. IE=EmulateIE8和IE=IE8的区别

    IE=8<meta http-equiv="X-UA-Compatible" content="IE=8" />This forces IE 8 t ...

  10. DOM-判断元素节点类型

    http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-i ...