基于jQuery上下切换的焦点图—带缩略图悬浮
分享一款基于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">
</h3>
</a><a href="#">
<h1>
直杆淋浴</h1>
<h2>
SHOWER</h2>
<img src="data:images/bannav_2.jpg" />
<h3 class="time1">
</h3>
</a><a href="#">
<h1>
浴室镜子</h1>
<h2>
MIRROR</h2>
<img src="data:images/bannav_4.jpg" />
<h3 class="time1">
</h3>
</a>
</div>
</div>
via:http://www.w2bc.com/Article/20797
基于jQuery上下切换的焦点图—带缩略图悬浮的更多相关文章
- 基于jQuery果冻式按钮焦点图切换代码
基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 一款jQuery满屏自适应焦点图切换特效
一款jQuery满屏自适应焦点图切换特效 ,自适应当前浏览器的宽度,可以作为网站整个大背景的却换效果,很不错的一款不jquery特效. 兼容性没的说直接秒杀了IE6.适用浏览器:IE6.IE7.IE8 ...
- 一款基于的jQuery仿苹果样式焦点图插件
这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...
- jQuery 3D圆盘旋转焦点图 支持鼠标滚轮
之前我们分享过很多炫酷实用的jQuery焦点图插件了,今天介绍的这款jQuery焦点图非常特别,所有图片围成一个圆圈,组成一个立体视觉的圆盘,并且可以旋转选择圆盘中的图片.另外,这款jQuery 3D ...
- 基于js全屏动画焦点图幻灯片
今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="sl ...
- 基于jQuery的宽屏可左右切换的焦点图插件
之前分享了很多实用的jQuery焦点图插件,大家可以看看.今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片.效果图如下: 在线预览 源码 ...
- 基于jquery多种切换效果的焦点图(兼容ie6)
随着html5和css3的诞生.各种非常酷.非常炫的网页焦点图在各个前端技术网上满天飞.基于html5和css3技术的焦点图有一个弊端就是要在ie9以上才支持.这让需兼容ie6到ie8的页面又爱又恨. ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- 好用的切换滑动焦点图框架jquery.superslide
拿到学习网站:http://www.superslide2.com/
随机推荐
- poj 1552 Doubles
#include <stdio.h> #include <stdlib.h> ]; int cmp(const void *a, const void *b) { return ...
- CST和GMT时间的区别
CST和GMT时间的区别 今天遇到一个奇怪的问题,在服务器端通过 c# 获取当前时间为 Fri Aug 28 09:37:46 CST 2009, 转化为 GMT时间为:28 Aug 2009 01: ...
- oracle根据正则表达式查找对应的字段
语法如下: SELECT * FROM 表名WHERE regexp_like(表字段,'正则') 例如: 查找某字段小数点后有两个小数以上的信息 SELECT * FROM A TWHERE reg ...
- GC:垃圾回收器简介
Java堆内存被划分为新生代和年老代两部分,新生代主要使用复制和标记-清除垃圾回收算法,年老代主要使用标记-整理垃圾回收算法,因此java虚拟中针对新生代和年老代分别提供了多种不同的垃圾收集器,JDK ...
- Spring JTA应用JOTM & Atomikos III Atomikos
前面简单介绍了JOTM如何在Spring中配置,并如何使用它的JTA事务,本节将介绍Atomikos如何与Spring集成,并使用它的JTA事务. Atomikos,是一个基于Java的开源事务管理器 ...
- M站 滚动日历弹框
先放张效果图: 完整Demo: <!DOCTYPE html> <html lang="en"> <head> <meta http-eq ...
- Cipher Message
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=34121#problem/C // File Name: c.cpp // Author: ...
- android Notification和NotificationManager的使用
Notification和NotificationManager 1.Broadcast Receiver组件没有提供可视化的界面来显示广播信息.这里我们可以使用Notification和Notifi ...
- 关于以DataTable形式批量写入数据的案例
void IDataAccess.CommandDataTable(DataTable dt, string ProcedureName, System.Data.Common.DbParameter ...
- PageValidate 类
转载:http://www.cnblogs.com/sufei/archive/2010/01/14/1648028.html using System.Text.RegularExpressions ...