基于jquery插件实现常见的幻灯片效果
更新时间：2013年11月01日 17:00:35 作者：
使用幻灯片效果的网站目前很普遍，本以为很复杂，实现起来却发现很简单，现成的jquery插件jquery.KinSlideshow.js便可实现幻灯片效果
在网站中使用幻灯片效果的目前很普遍，如何实现，自己经过一番研究，本以为很复杂，想不到却很简单。有现成的jquery插件jquery.KinSlideshow.js。
使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果
htm代码：
<div id="focusNews" style="visibility:hidden;" class="ifocus" >
<a href="test.aspx" target="_blank"><img src="images/1.jpg" alt="标题一" /></a>
<a href="test.aspx" target="_blank"><img src="images/2.jpg" alt="标题二" /></a>
<a href="test.aspx" target="_blank"><img src="images/3.jpg" alt="标题三" /></a>
<a href="test.aspx" target="_blank"><img src="images/4.jpg" alt="标题四" /></a>
<a href="test.aspx" target="_blank"><img src="images/5.jpg" alt="标题五" /></a>
<a href="test.aspx" target="_blank"><img src="images/6.jpg" alt="标题六" /></a>
</div>
js代码：
$(function () {
$("#focusNews").KinSlideshow({
// moveStyle:"down", //设置切换方向为向下 [默认向左切换]
intervalTime:8, //设置间隔时间为8秒 [默认为5秒]
mouseEvent:"mouseover", //设置鼠标事件为“鼠标滑过切换” [默认鼠标点击时切换]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //设置标题文字大小为14px，颜色：#FF0000
});
})
设置图片大小的CSS
.ifocus{width:400px;height:300px;visibility:hidden;}
.ifocus img{width:700px;height:400px; }
最终效果图
使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果
htm代码：
复制代码 代码如下:
<div id="focusNews" style="visibility:hidden;" class="ifocus" >
<a href="test.aspx" target="_blank"><img src="images/1.jpg" alt="标题一" /></a>
<a href="test.aspx" target="_blank"><img src="images/2.jpg" alt="标题二" /></a>
<a href="test.aspx" target="_blank"><img src="images/3.jpg" alt="标题三" /></a>
<a href="test.aspx" target="_blank"><img src="images/4.jpg" alt="标题四" /></a>
<a href="test.aspx" target="_blank"><img src="images/5.jpg" alt="标题五" /></a>
<a href="test.aspx" target="_blank"><img src="images/6.jpg" alt="标题六" /></a>
</div>
js代码：
复制代码 代码如下:
$(function () {
$("#focusNews").KinSlideshow({
// moveStyle:"down", //设置切换方向为向下 [默认向左切换]
intervalTime:8, //设置间隔时间为8秒 [默认为5秒]
mouseEvent:"mouseover", //设置鼠标事件为“鼠标滑过切换” [默认鼠标点击时切换]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //设置标题文字大小为14px，颜色：#FF0000
});
})
设置图片大小的CSS
复制代码 代码如下:
.ifocus{width:400px;height:300px;visibility:hidden;}
.ifocus img{width:700px;height:400px; }
最终效果图
相关文章
这篇文章主要介绍了javascript数据类型中的一些小知识点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最近小编在做一个项目，其中涉及到一个模块关于星座查询功能，即在文本框中输入一个生日值，点击按钮可以得到对应的星座，怎么实现这个需求呢？下面小编通过示例代码给大家介绍下，需要的朋友参考下吧2021-11-11
本文主要JS中对数组元素进行增删改移的方法，用表格的形式进行整理，方便阅读，具有很好的参考价值，下面就跟小编一起来看下吧2016-12-12
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
随着web2.0的彪悍发展，以及浏览器端所承载的工作越来越大（在不是很影响性能的情况下，开发者都习惯把能用浏览器做的事儿都让浏览器做，以减轻服务器的压力和带宽费用等）。2010-04-04
这篇文章主要介绍了js中火星坐标、百度坐标、WGS84坐标转换实现方法,涉及JavaScript数值计算相关操作技巧,需要的朋友可以参考下2020-03-03
Bootstrap前端开发案例二，这篇文章能够帮助大家更还好的进行前端开发Bootstrap，相信大家会爱上Bootstrap2016-06-06
这篇文章主要为大家详细介绍了微信小程序scroll-view实现左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了TypeScript联合类型,交叉类型和类型保护，联合类型就是定义一些类型，定义的变量只需要满足任意一种类型即可，交叉类型就是需要满足所有类型，交叉类型使用，更多内容我们来看看下面文章详细内容吧2021-12-12
这篇文章主要介绍了javascript设计模式之策略模式学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
JavaScript 数据响应是一种重要的前端开发概念,是指在应用程序中的数据发生变化时,能够自动更新与这些数据相关的用户界面（UI）部分的能力,本文我们来总结一下目前可以简单实现 JavaScript 中的数据响应的方法,需要的朋友可以参考下2023-09-09
最新评论