jquery中焦点图插件kinslideshow

最新推荐文章于 2013-04-28 20:13:36 发布

原创最新推荐文章于 2013-04-28 20:13:36 发布 · 952 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jQuery #JQUERY #Jquery #JQuery #KinSlideshow #焦点图

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一款兼容多种浏览器的jQuery幻灯片焦点图插件KinSlideshow的基本使用方法，包括默认设置效果代码及注意事项，旨在帮助开发者在网页上实现流畅的幻灯片展示效果。

JQuery幻灯片焦点图插件代码

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="标题" >