基于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; }
最终效果图
相关文章
JSON一种简单的数据格式，比xml更轻巧，在JavaScript中处理JSON数据不需要任何特殊的API或工具包，下面为大家详细介绍下js中的json对象2014-10-10
javascript使用isNaN()函数判断变量是否为数字
javascript中判断变量是否为数字的方法，这里主要介绍javascript里的 isNaN() 函数，具体使用如下，感兴趣的朋友可以参考下2013-09-09
本文给大家简单分享了一下个人项目中解决无刷新上传文件的方法和示例，有需要的小伙伴可以参考下。2015-06-06
JavaScript 是一门基于原型的语言,它的继承机制与传统的基于类的面向对象编程有所不同,尽管 ES6 引入了 class 语法,但本质上仍然是基于原型链的继承,本文将详细介绍 JavaScript 继承的几种实现方式,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了JS实现的简单下拉框联动功能,涉及javascript事件响应及页面元素属性动态修改相关操作技巧,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了ECMAScript中函数function类型的相关资料,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了如何在JavaScript使用AOP编程思想实现监听HTTP请求,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
javascript 异步页面查询实现代码(asp.net)
异步页面查询，其实与自动完成时一样的原理，根据用户输入的关键词自动的与数据库中的匹配，并显示出来，提高用户体验，但主要搜索量大的话，增加服务器开销。2010-05-05
这篇文章再次为大家详细介绍了JavaScript简单实现弹出拖拽窗口的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了js中for in的缺陷，有需要的朋友可以参考一下2013-12-12
最新评论