基于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_ ...
随机推荐
- 30大最有影响力的Web设计与开发英文博客
1stwebdesigner的创始人Dainis Graveris挑选出30个高质量和具有影响力的Web设计与前端技术博客,其中很多我们都耳熟能详.但这么完整的列表,还是值得收藏的.另外,你大概不会了 ...
- HDU 2040 亲和数 [补] 分类: ACM 2015-06-25 23:10 10人阅读 评论(0) 收藏
今天和昨天都没有做题,昨天是因为复习太累后面忘了,今天也是上午考毛概,下午又忙着复习计算机图形学,晚上也是忘了结果打了暗黑3,把暗黑3 打通关了,以后都不会玩太多游戏了,争取明天做3题把题目补上,拖越 ...
- MFC如何添加系统消息处理函数?
http://zhidao.baidu.com/question/318026804.html 在MFC程序中,我们并不经常直接调用Windows API,而是从MFC类创建对象并调用属于这些对象的成 ...
- windows 7 获取SYSTEM权限
当Adobe Reader 9.0卸载之后,你会发现原来的C:\Program Files\Adobe\Reader 9.0\Resource\CMap文件夹下的一些文件无法删除,提示你需要SYSTE ...
- 技术文集:万能WINDOWS XP封装
这里将系统封装分为3步:做系统.封装.部署 一.做系统 平台不限,但不建议在虚拟机上制作.CPU及主板芯片没有限制,关于intelide和intelppm的不兼容问题,深度白金3in1并没有删除这些注 ...
- oracle学习 六 删除表空间,数据文件的语句以及导入导出dmp文件的方法(持续更新中)
要想删除表空间就要先删除数据文件 例如这个例子 CREATE TABLESPACE STHSGIMGDB_SPACE11 DATAFILE 'D:\ORACLEDATABASE\JinHuaDataB ...
- HDU1003前导和
简单维护前导和 #include<stdio.h> int main() { ],cas,key=; scanf("%d",&cas); while(cas-- ...
- kindeditor html代码过滤不能保存
这是因为编辑器默认开启了过滤模式(filterMode:true).当filterMode为true时,编辑器会根据htmlTags设定自动过滤HTML代码,主要是为了生成干净的代码.如果想保留所有H ...
- [Mac]Mac OS 10.11虚拟机搭建ReactNative遇坑记录
1.命令行安装nvm,一定要加入/.bash_profile,加入以后需要执行source /.bash_profile,使nvm命令行立即生效 2.node一定要安装最新版本,不然执行npm ins ...
- JS鼠标滚动事件
-----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...