Jquery幻灯片特效jquery.KinSlideshow-1.1.js

模板网 2014-09-05

KinSlideshow无缝滑动幻灯片jquery特效代码 Jquery幻灯片特效jquery.KinSlideshow-1.1.js

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

演示页面: 演示一   演示二    演示三

打包下载: KinSlideshow无缝滑动幻灯片jquery特效代码

KinSlideshow默认设置效果代码:

*焦点图显示的标题为 img 中 alt 属性中的文字

*当只有一张图片时不显示按钮,但也会有无缝切换效果

复制代码 代码如下:
javascript:
  $(function(){
      $("#KinSlideshow").KinSlideshow();
  })  
HTML:
  <div id="KinSlideshow" style="visibility:hidden;">
      <a href="http://www.5icool.org" target="_blank"><img src="images/1.jpg" alt="这是标题一" /></a>
      <a href="http://www.5icool.org" target="_blank"><img src="images/2.jpg" alt="这是标题二" /></a>
      <a href="http://www.5icool.org" target="_blank"><img src="images/3.jpg" alt="这是标题三" /></a>
      <a href="http://www.5icool.org" target="_blank"><img src="images/4.jpg" alt="这是标题四" /></a>
      <a href="http://www.5icool.org" target="_blank"><img src="images/5.jpg" alt="这是标题五" /></a>
      <a href="http://www.5icool.org" target="_blank"><img src="images/6.jpg" alt="这是标题六" /></a>
  </div>

效果图:

KinSlideshow无缝滑动幻灯片jquery特效代码

<!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无缝滑动幻灯片jquery特效代码_医疗模板库 www.120muban.com</title>
<script src="http://www.120muban.com/demo/20140905/01/js/jquery-1.4a2.min.js" type="text/javascript"></script>
<script src="http://www.120muban.com/demo/20140905/01/js/jquery.KinSlideshow-1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("#KinSlideshow").KinSlideshow();
})
</script>
<style type="text/css">
h1.title{ font-family:"微软雅黑",Verdana; font-weight:normal}
.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>
<h1 class="title">Jquery.KinSlideshow演示导航</h1>
<ol>
<li><h3><a href="http://www.120muban.com/demo/20140905/01/demo.html">默认设置效果</a></h3></li>
<li><h3><a href="http://www.120muban.com/demo/20140905/01/demo2.html">自定义切换参数效果</a></h3></li>
<li><h3><a href="http://www.120muban.com/demo/20140905/01/demo3.html">自定义外观参数效果</a></h3></li>
</ol>

    <div id="KinSlideshow" style="visibility:hidden;">
        <a href="http://www.120muban.com" target="_blank"><img src="http://www.120muban.com/demo/20140905/01/images/1.jpg" alt="这是标题一" width="600" height="300" /></a>
        <a href="http://www.120muban.com" target="_blank"><img src="http://www.120muban.com/demo/20140905/01/images/2.jpg" alt="这是标题二" width="600" height="300" /></a>
        <a href="http://www.120muban.com" target="_blank"><img src="http://www.120muban.com/demo/20140905/01/images/3.jpg" alt="这是标题三" width="600" height="300" /></a>
        <a href="http://www.120muban.com" target="_blank"><img src="http://www.120muban.com/demo/20140905/01/images/4.jpg" alt="这是标题四" width="600" height="300" /></a>
        <a href="http://www.120muban.com" target="_blank"><img src="http://www.120muban.com/demo/20140905/01/images/5.jpg" alt="这是标题五" width="600" height="300" /></a>
        <a href="http://www.120muban.com" target="_blank"><img src="http://www.120muban.com/demo/20140905/01/images/6.jpg" alt="这是标题六" width="600" height="300" /></a>
    </div>
</body>
</html>

相关文章

  1. jQuery火箭上升回到顶部效果

    jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图:

  2. jQuery实现的返回顶部功能

    jQuery实现的返回顶部功能

  3. jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1

    好吧一直有人抱怨js版本的焦点图过渡效果太单调,今天介绍的这款jQuery插件Nivo Slider,除了一般该有的参数设置外,最大的亮点就是其集成了16种(v2.5.1)过渡效果 ,再加上对CSS的调整,效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略

  4. jquery.md5.js下载

    jquery.md5.js下载 使用方法 复制代码 代码如下: script type=text/javascript src=jquery.min.js/script script type=jquery.md5.js/script script type=text/javascript alert($.md5(test)); /script 点击下载 官网:https://github.com/placemarker/jQuery

  5. 很棒的网站底部导航条效果

    很棒的网站底部导航条效果,访客输入咨询信息点击发送按钮时可以向商务通传递访客输入的信息。 打包下载: 很棒的网站底部导航条效果 效果截图:

随机推荐

  1. jQuery火箭上升回到顶部效果

    jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图:

  2. jQuery实现的返回顶部功能

    jQuery实现的返回顶部功能

  3. jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1

    好吧一直有人抱怨js版本的焦点图过渡效果太单调,今天介绍的这款jQuery插件Nivo Slider,除了一般该有的参数设置外,最大的亮点就是其集成了16种(v2.5.1)过渡效果 ,再加上对CSS的调整,效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略

  4. jquery.md5.js下载

    jquery.md5.js下载 使用方法 复制代码 代码如下: script type=text/javascript src=jquery.min.js/script script type=jquery.md5.js/script script type=text/javascript alert($.md5(test)); /script 点击下载 官网:https://github.com/placemarker/jQuery

  5. 很棒的网站底部导航条效果

    很棒的网站底部导航条效果,访客输入咨询信息点击发送按钮时可以向商务通传递访客输入的信息。 打包下载: 很棒的网站底部导航条效果 效果截图: