新浪微博 登陆  注册   设为首页 加入收藏

学PHP >> JQUERY >> jquery中焦点图插件kinslideshow

jquery中焦点图插件kinslideshow

查看次数17159 发表时间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)    


  相关推荐



1楼 Ahmed说: 2013-09-03 16:12:38
Finnidg this post has solved my problem
2楼 学PHPER说: 2014-03-23 04:22:50
1

  发表评论
昵称:
(不超过20个字符或10个汉字)
内容: