演示地址:http://www.corange.cn/demo/3673/index.html
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>KinSlideshow默认设置效果代码</title>
<script src="js/jquery-1.4a2.min.js" type="text/javascript"></script>
<script src="js/jquery.KinSlideshow-1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#KinSlideshow").KinSlideshow();
})
</script>
<style type="text/css">
.code{ height:auto; padding:20px; border:1px solid #9EC9FE; background:#ECF3FD;}
.code pre{ font-family:"Courier New";font-size:14px;}
.info{ font-size:12px; color:#666666; font-family:Verdana; margin:20px 0 50px 0;}
.info p{ margin:0; padding:0; line-height:22px; text-indent:40px;}
h2.title{ margin:0; padding:0; margin-top:50px; font-size:18px; font-family:"微软雅黑",Verdana;}
h3.title{ font-size:16px; font-family:"微软雅黑",Verdana;}
.importInfo{ font-family:Verdana; font-size:14px;}
</style>
</head>
<body>
<div id="KinSlideshow" style="visibility:hidden;">
<a href="http://www.corange.cn" target="_blank"><img src="images/1.jpg" alt="这是标题一" width="600" height="300" /></a>
<a href="http://www.corange.cn" target="_blank"><img src="images/2.jpg" alt="这是标题二" width="600" height="300" /></a>
<a href="http://www.corange.cn" target="_blank"><img src="images/3.jpg" alt="这是标题三" width="600" height="300" /></a>
<a href="http://www.corange.cn" target="_blank"><img src="images/4.jpg" alt="这是标题四" width="600" height="300" /></a>
<a href="http://www.corange.cn" target="_blank"><img src="images/5.jpg" alt="这是标题五" width="600" height="300" /></a>
<a href="http://www.corange.cn" target="_blank"><img src="images/6.jpg" alt="这是标题六" width="600" height="300" /></a>
</div>
</body>
</html>
代码提示
*焦点图显示的标题为 img 中 alt 属性中的文字
*当只有一张图片时不显示按钮,但也会有无缝切换效果
小提示1:
外层div建议加上一句样式:style="visibility:hidden;"
不加此句在IE下页面刚加载的瞬间时候会看到所有图片原始样子
这是因为KinSlideshow 要等页面加载完成才能解析页面中要设置成焦点图的HTML
虽然只有不到0.01秒的瞬间但用户体验不太好,所以建议加上。不加对程序也没影响!
小提示2:
想要兼容Chrome需要在img标签中写上图片的实际宽度和高度<img src= width="xx" height="xx" alt="标题" >,其他浏览器不需要。<img src="" alt="标题" >
JS
http://www.corange.cn//uploadfiles/jquery.kinslideshow-1.1_96020.rar
- 浏览: 60651 次
相关推荐
兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。
KinSlideshow 基于jquery的幻灯片焦点图插件.zip
KinSlideshow 基于Jquery的幻灯片焦点图插件VIEW1.zip
jquery.KinSlideshow焦点图插件可以自定义方向滚动的焦点图片切换
KinSlideshow1.2.1图片轮播插件非压缩版源代码,方便需要修改的童鞋。实例参考地址http://www.lanrentuku.com/js/jiaodiantu-794.html Jquery幻灯片焦点图插件,感谢支持。
兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。
兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。
KinSlideshow jQuery 多样式图片幻灯片插件 KinSlideshow jQuery 多样式图片幻灯片插件
使用jquery.KinSlideshow-1.2实现焦点图轮播效果,可自定义轮播配置,内附几个使用demo
KinSlideshow幻灯片插件下载,新闻滚动切换效果
兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果
64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起...
javascript: $(function(){ $("#KinSlideshow").KinSlideshow(); }) ... <div id="... KinSlideshow幻灯片插件,基本能满足你在网页上使用幻灯片(焦点图)效果。兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera。
使用超级简单: javascript: $(function(){ $("#KinSlideshow").KinSlideshow(); }) ...<div id="KinSlideshow" > ... KinSlideshow幻灯片插件,基本能满足你在网页上使用幻灯片(焦点图)效果 ,兼容所有主流浏览器。
本文实例讲述了jQuery焦点图轮播插件KinSlideshow用法。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
Jquery.KinSlideshow演示导航
64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起...