jquery中焦点图插件kinslideshow
查看次数29681 发表时间2012-12-21 21:52:37
JQuery幻灯片焦点图插件兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。演示如下:
KinSlideshow默认设置效果代码:
*焦点图显示的标题为 img 中 alt 属性中的文字
*当只有一张图片时不显示按钮,但也会有无缝切换效果
javascript:
$(function(){ $("#focuspic").KinSlideshow(); })
HTML:
<div class="floatL" id="focuspic" style="visibility:hidden;"> <a href="http://www.chinaetax.com.cn/" target="_blank"><img src="__STYLE__/img/tmp/房产税.jpg" alt="房产税能否抑制房价" width="280" height="218" /></a> <a href="http://www.chinaetax.com.cn/" target="_blank"><img src="__STYLE__/img/tmp/房产税40平米.jpg" alt="为何提人均住房40平方米以上征房产税" width="280" height="218" /></a> </div>
小提示1:
外层div建议加上一句样式:style="visibility:hidden;"
不加此句在IE下页面刚加载的瞬间时候会看到所有图片原始样子
这是因为KinSlideshow 要等页面加载完成才能解析页面中要设置成焦点图的HTML
虽然只有不到0.01秒的瞬间但用户体验不太好,所以建议加上。不加对程序也没影响!
小提示2:
想要兼容Chrome需要在img标签中写上图片的实际宽度和高度<img src= width="xx" height="xx" alt="标题" >,其他浏览器不需要,<img src="" alt="标题" >
(转发请注明转自:学PHP)
相关推荐
- 10 款高质量的 jQuery 表单验证插件 (2013-01-04 17:41:37)
- jquery实现复选框多选、单选、全不选功能,很实用 (2013-03-02 22:54:15)
- 8 款简单大气的 jQuery/CSS3 图片特效 (2013-05-16 10:07:29)
- 一些可以替代 jQuery 的浏览器内置功能 (2013-05-27 18:07:30)
- jquery div 阴影 和透明是怎么实现的? (2013-05-28 12:54:26)
- js和jquery穿梭iframe获取元素 (2012-12-21 21:52:33)
- jQuery 遮罩层插件blockUI (2012-12-21 21:52:17)
- jQuery源码分析 (2012-12-15 20:40:11)
- js、jquery图片动画,图片动态切换 (2012-12-15 20:39:56)
- jQuery页面加载初始化的3种方法 (2012-12-14 22:21:28)
- 1楼 Ahmed说: 2013-09-03 16:12:38
-
Finnidg this post has solved my problem
- 2楼 学PHPER说: 2014-03-23 04:22:50
-
1
发表评论