基于jQuery标题有打字效果的焦点图
给大家分享一款基于jQuery标题有打字效果的焦点图。之前为大家分享了好多jquery的焦点图。这款焦点图适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

实现的代码。
html代码:
<!-- 代码 开始 -->
<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href="http://www.w2bc.com/" target="_blank">
<img id="slide-img-1" src="data:images/a1.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
target="_blank">
<img id="slide-img-2" src="data:images/a2.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
target="_blank">
<img id="slide-img-3" src="data:images/a3.jpg" class="slide" alt="" /></a>
<a href="http://www.w2bc.com/" target="_blank">
<img id="slide-img-4" src="data:images/a4.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
target="_blank">
<img id="slide-img-5" src="data:images/a5.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
target="_blank">
<img id="slide-img-6" src="data:images/a6.jpg" class="slide" alt="" /></a>
<a href="http://www.w2bc.com/" target="_blank">
<img id="slide-img-7" src="data:images/a4.jpg" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text">
<strong></strong><span></span>
</p>
<p id="slide-desc" class="text">
</p>
<p id="slide-nav">
</p>
</div>
</div>
</div>
js代码:
if (!window.slider) {
var slider = {};
}
slider.data = [
{
"id": "slide-img-1", // 与slide-runner中的img标签id对应
"client": "标题1",
"desc": "这里修改描述 这里修改描述 这里修改描述" //这里修改描述
},
{
"id": "slide-img-2",
"client": "标题2",
"desc": "add your description here"
},
{
"id": "slide-img-3",
"client": "标题3",
"desc": "add your description here"
},
{
"id": "slide-img-4",
"client": "标题4",
"desc": "add your description here"
},
{
"id": "slide-img-5",
"client": "标题5",
"desc": "add your description here"
},
{
"id": "slide-img-6",
"client": "标题6",
"desc": "add your description here"
},
{
"id": "slide-img-7",
"client": "标题7",
"desc": "add your description here"
}
];
via:http://www.w2bc.com/Article/17457
基于jQuery标题有打字效果的焦点图的更多相关文章
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 一款基于jQuery的全屏广告图片焦点图
之前为大家分享了很多jQuery焦点图插件.今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅.效果图如下: 在线预览 源码下载 实现 ...
- 基于jQuery右侧带缩略图导航的焦点图
今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可 ...
- 基于jQuery带标题的图片3D切换焦点图
今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...
- 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
- jQuery模仿人类打字效果插件typetype
typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 基于jQuery Tooltips悬停提示效果
基于jQuery Tooltips悬停提示效果.这是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效.效果图如下: 在线预览 源码 ...
- 基于jQuery图像碎片切换效果插件FragmentFly
基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览 源码下载 部分代码: <div class="all_ ...
随机推荐
- dom 绘制正方形
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 基于Linux2.6内核的加密容器法保护文件方法
本文出自 "李晨光原创技术博客" 博客,谢绝转载!
- openstack-dbs
真正的服务器派生出线程 和子进程处理多个连接当允许客户端加入聊天室,他发送的任何一条文本都将广播给聊天室中的每个用户,除非文本是服务器CLI当广播一条消息,消息前面将加上发送者的昵称 以尖括号括住昵称 ...
- 安装Win7和Office2010并激活
1. 下载Win7 建议安装原版的win7 SP1 64位中文旗舰版,不建议安装Ghost版本,之前用U盘安装Ghost版本一直失败.原版的下载地址为,选其中一个地址下载就行了. ed2k://|fi ...
- hdu 5424 Rikka with Graph II (BestCoder Round #53 (div.2))(哈密顿通路判断)
http://acm.hdu.edu.cn/showproblem.php?pid=5424 哈密顿通路:联通的图,访问每个顶点的路径且只访问一次 n个点n条边 n个顶点有n - 1条边,最后一条边的 ...
- oracle学习 二(持续更新中)
oracle数据库的启动停止 以oracle用户身份登录 登录后输入以下命令: oracle-> sqlplus /nolog SQL*Plus: Release 9.2.0.1.0 - Pro ...
- UVa 1620 Lazy Susan (找规律)
题意:给 n 个数,每次可以把4个连续的数字翻转,问你能不能形成1-n的环状排列. 析:找一下奇偶性,写几个数试试,就会找到规律. 代码如下: #include <cstdio> #inc ...
- NS_ENUM & NS_OPTIONS
When everything is an object, nothing is. So, there are a few ways you could parse that, but for the ...
- 转载php在IIS中运行
在IIS中配置PHP运行环境简单步骤 安装 IIS 7.0 打开 Control Panel\Programs\Programs and Features\Turn Windows features ...
- Mahout之Canopy Clustering深入理解
转自:http://www.cnblogs.com/vivounicorn/archive/2011/09/23/2186483.html Mahout学习——Canopy Clustering 聚类 ...