Kinslideshow图片切换
2014-04-16 来源/作者:未知/管理员 浏览:次 类别:图片切换
Kinslideshow图片切换
兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(图片切换)效果。
KinSlideshow默认设置效果代码:
*焦点图显示的标题为 img 中 alt 属性中的文字
*当只有一张图片时不显示按钮,但也会有无缝切换效果
javascript:
$(function(){ $("#KinSlideshow").KinSlideshow(); })
HTML:
<div id="KinSlideshow" style="visibility:hidden;"> <a href="http://www.csshello.com" target="_blank"><img src="images/1.jpg" alt="这是标题一" /></a> <a href="http://www.csshello.com" target="_blank"><img src="images/2.jpg" alt="这是标题二" /></a> <a href="http://www.csshello.com" target="_blank"><img src="images/3.jpg" alt="这是标题三" /></a> <a href="http://www.csshello.com" target="_blank"><img src="images/4.jpg" alt="这是标题四" /></a> <a href="http://www.csshello.com" target="_blank"><img src="images/5.jpg" alt="这是标题五" /></a> <a href="http://www.csshello.com" target="_blank"><img src="images/6.jpg" alt="这是标题六" /></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="标题" /> 。