现在jquery越来越易使用了.少说废话,直接上代码:
<html>
<head>
<script src="/blog/jquery-1.4a2.min.js" type="text/javascript"></script>
<script src="/blog/jquery.KinSlideshow-1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#KinSlideshow").KinSlideshow();
})
</script>
</head>
<body>
<div id="KinSlideshow" style="visibility:hidden;">
<a href="http://www.qq1.com" target="_blank"><img src="/blog/images/1.jpg" alt="这是标题一" width="600" height="300" /></a>
<a href="http://www.qq2.com" target="_blank"><img src="/blog/images/2.jpg" alt="这是标题二" width="600" height="300" /></a>
<a href="http://www.qq3.com" target="_blank"><img src="/blog/images/3.jpg" alt="这是标题三" width="600" height="300" /></a>
<a href="http://www.qq4.com" target="_blank"><img src="/blog/images/4.jpg" alt="这是标题四" width="600" height="300" /></a>
<a href="http://www.qq5.com" target="_blank"><img src="/blog/images/5.jpg" alt="这是标题五" width="600" height="300" /></a>
<a href="http://www.qq6.com" target="_blank"><img src="/blog/images/6.jpg" alt="这是标题六" width="600" height="300" /></a>
</div>
</body>
</html>
两个js下载:
http://js.alixixi.com/demo/652/js/jquery-1.4a2.min.js
http://js.alixixi.com/demo/652/js/jquery.KinSlideshow-1.1.js
图片自已换一下.
详细说明见这里:
Jquery.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.qq1.com" target="_blank"><img src="/blog/images/1.jpg" alt="这是标题一" /></a>
<a href="http://www.qq2.com" target="_blank"><img src="/blog/images/2.jpg" alt="这是标题二" /></a>
<a href="http://www.qq3.com" target="_blank"><img src="/blog/images/3.jpg" alt="这是标题三" /></a>
<a href="http://www.qq4.com" target="_blank"><img src="/blog/images/4.jpg" alt="这是标题四" /></a>
<a href="http://www.qq5.com" target="_blank"><img src="/blog/images/5.jpg" alt="这是标题五" /></a>
<a href="http://www.qq6.com" target="_blank"><img src="/blog/images/6.jpg" alt="这是标题六" /></a>
</div>
小提示1:外层div建议加上一句样式：style="visibility:hidden;"
不加此句在IE下页面刚加载的瞬间时候会看到所有图片原始样子
这是因为KinSlideshow 要等页面加载完成才能解析页面中要设置成焦点图的HTML
虽然只有不到0.01秒的瞬间但用户体验不太好，所以建议加上。不加对程序也没影响！
