`
backspace
  • 浏览: 137109 次
文章分类
社区版块
存档分类
最新评论

Jquery焦点图/幻灯片效果 插件 KinSlideshow

 
阅读更多
<script type="text/javascript">// <![CDATA[ BAIDU_CLB_SLOT_ID = "489794"; // ]]></script><script type="text/javascript" src="http://cbjs.baidu.com/js/o.js"></script>
JavaScript
$( function(){
        $("#KinSlideshow").KinSlideshow({
                moveStyle:"down",          // 设置切换方向为向下 [默认向左切换]
                intervalTime:8,            // 设置间隔时间为8秒  [默认为5秒]
                mouseEvent:"mouseover"         // 设置鼠标事件为“鼠标滑过切换”  [默认鼠标点击时切换]
                titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"}  // 设置标题文字大小为14px,颜色:#FF0000
        });
    })

HTML:

< div  id ="KinSlideshow"  style ="visibility:hidden;" >
       < href ="javascript:void(0)" >< img  src ="images/1.jpg"  alt ="这是标题一"   /></ a >
       < href ="javascript:void(0)" >< img  src ="images/2.jpg"  alt ="这是标题二"   /></ a >
       < href ="javascript:void(0)" >< img  src ="images/3.jpg"  alt ="这是标题三"   /></ a >
       < href ="javascript:void(0)" >< img  src ="images/4.jpg"  alt ="这是标题四"   /></ a >
       < href ="javascript:void(0)" >< img  src ="images/5.jpg"  alt ="这是标题五"   /></ a >
       < href ="javascript:void(0)" >< img  src ="images/6.jpg"  alt ="这是标题六"   /></ a >
   </ div >

小提示1: 外层div建议加上一句样式:style="visibility:hidden;" 不加此句在IE下页面刚加载的瞬间时候会看到所有图片原始样子 这是因为KinSlideshow 要等页面加载完成才能解析页面中要设置成焦点图的HTML 虽然只有不到0.01秒的瞬间但用户体验不太好,所以建议加上。不加对程序也没影响!

小提示2: 想要兼容Chrome需要在img标签中写上图片的实际宽度和高度标题,其他浏览器不需要。标题

<script type="text/javascript">// <![CDATA[ BAIDU_CLB_SLOT_ID = "551284"; // ]]></script><script type="text/javascript" src="http://cbjs.baidu.com/js/o.js"></script>
<script type="text/javascript">// <![CDATA[ BAIDU_CLB_SLOT_ID = "551289"; // ]]></script><script type="text/javascript" src="http://cbjs.baidu.com/js/o.js"></script>
分享到:
评论

相关推荐

    Jquery幻灯片焦点图插件Jquery.KinSlideshow的各种Demo

    **jQuery.KinSlideshow幻灯片插件详解** 在网页设计中,焦点图或幻灯片效果是一种常见的视觉展示手段,能够吸引用户注意力并高效地展示信息。jQuery.KinSlideshow是一款优秀的JavaScript插件,它提供了丰富的功能和...

    KinSlideshow1.2.1 基于jquery的幻灯片/焦点图插件 js源码下载

    KinSlideshow1.2.1图片轮播插件非压缩版源代码,方便需要修改的童鞋。实例参考地址http://www.lanrentuku.com/js/jiaodiantu-794.html Jquery幻灯片焦点图插件,感谢支持。

    KinSlideshow 基于Jquery的幻灯片焦点图插件VIEW1.zip

    《KinSlideshow:基于...总结,KinSlideshow是一款实用的jQuery幻灯片插件,它通过简单的配置和灵活的API,帮助开发者快速实现动态图片展示效果。无论是新手还是经验丰富的开发者,都能从中受益,提升网页的交互体验。

    Jquery幻灯片焦点图插件

    KinSlideshow是其中一款功能丰富的jQuery幻灯片插件,它提供了许多定制选项,以满足不同设计师和开发者的需求。 首先,KinSlideshow插件通常具备以下关键功能: 1. **自动播放**:可以设置幻灯片在一段时间后自动...

    KinSlideshow 基于jquery的幻灯片焦点图插件.zip

    总之,KinSlideshow是利用jQuery实现的幻灯片插件,它简化了网页中焦点图的开发过程,提供了丰富的自定义选项和流畅的动画效果。通过阅读“使用须知.txt”并参考示例文件,开发者可以轻松地将这个插件集成到自己的...

    Jquery幻灯片焦点图

    本文将深入探讨如何使用jQuery和KinSlideshow插件创建兼容多种浏览器的幻灯片效果。 首先,了解**jQuery**的基本概念至关重要。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax...

    Jquery幻灯片插件

    jQuery作为一款强大的JavaScript库,提供了丰富的插件来实现这类效果,其中KinSlideshow就是一款广泛使用的幻灯片插件,尤其在对浏览器兼容性有较高要求的情况下。 ### 1. 兼容性与适应性 KinSlideshow插件特别...

    KinSlideshow-1.1

    javascript: $(function(){ $("#KinSlideshow").KinSlideshow(); }) ... &lt;div id="... KinSlideshow幻灯片插件,基本能满足你在网页上使用幻灯片(焦点图)效果。兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera。

    KinSlideshow 1.2.1(最新版本)

    使用超级简单: javascript: $(function(){ $("#KinSlideshow").KinSlideshow(); }) ...&lt;div id="KinSlideshow" &gt; ... KinSlideshow幻灯片插件,基本能满足你在网页上使用幻灯片(焦点图)效果 ,兼容所有主流浏览器。

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起...

    KinSlideshow jQuery 多样式图片幻灯片插件

    内容索引:脚本资源,jQuery,KinSlideshow,图片幻灯,图片切换 jQuery幻灯片插件,基本能满足你在网页上使用幻灯片(焦点图)效果,兼容IE6/IE7/IE8/IE9,FireFox,Chrome,Opera。  想要兼容Chrome需要在img标签中写上...

    100多个JQuery效果示例(实例)div+css+javascrpit

    64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    64.[荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65.一款jQuery仿flash放大图片的相册插件 66.一款jQuery仿苹果mac os系统经典菜单效果源码 67.一款jQuery动感左右滚动图片切换插件带缩图一起...

    Jquery幻灯片特效代码分享--鼠标滑过按钮时切换(2)

    本文讲述了利用jQuery实现网页中幻灯片焦点图的方法,并展示了如何通过鼠标滑过按钮实现幻灯片的切换。幻灯片特效是网页设计中常见的元素,它能够动态地展示图片或内容,吸引用户的注意力。本文分享的特效能够实现...

    Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)

    标题和描述所包含的知识点主要围绕如何使用jQuery库来实现一个具有交云效果的幻灯片焦点图。jQuery是目前广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。通过该库,开发者可以很...

    js轮播器4种

    在压缩包中的"Jquery幻灯片焦点图插件kinslideshow"是基于jQuery的一个轮播插件示例,它可能包含了以上所述的多种翻页方式。jQuery作为一款流行的JavaScript库,提供了丰富的DOM操作和动画功能,使得创建轮播器变得...

Global site tag (gtag.js) - Google Analytics