Jquery幻灯片焦点图插件

＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。

兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件，功能很多，基本能满足你在网页上使用幻灯片(焦点图)效果。

KinSlideshow默认设置效果代码:

javascript:

  $(function(){
      $("#KinSlideshow").KinSlideshow();
  })

HTML:

  <div id="KinSlideshow" style="visibility:hidden;">
      <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/1.jpg" alt="这是标题一" /></a>
      <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/2.jpg" alt="这是标题二" /></a>
      <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/3.jpg" alt="这是标题三" /></a>
      <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/4.jpg" alt="这是标题四" /></a>
      <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/5.jpg" alt="这是标题五" /></a>
      <a href="https://www.lanrentuku.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="标题" >

Jquery.KinSlideshow演示导航

默认设置效果

自定义切换参数效果

自定义外观参数效果

每次打开页面随机选择切换效果

KinSlideshow默认设置效果代码:

javascript:

HTML: