基于jquery插件实现常见的幻灯片效果


Posted in Javascript onNovember 01, 2013

在网站中使用幻灯片效果的目前很普遍,如何实现,自己经过一番研究,本以为很复杂,想不到却很简单。有现成的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插件实现常见的幻灯片效果
Javascript 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
jQuery Mobile 导航栏代码
Nov 01 #Javascript
js将json格式内容转换成对象的方法
Nov 01 #Javascript
JS实现切换标签页效果实例代码
Nov 01 #Javascript
Javascript delete 引用类型对象
Nov 01 #Javascript
理解Javascript闭包
Nov 01 #Javascript
Javascript 命名空间模式
Nov 01 #Javascript
完美解决AJAX跨域问题
Nov 01 #Javascript
You might like
smarty实例教程
2006/11/19 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP解析RSS的方法
2015/03/05 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
javascript代码加载优化方法
2011/01/30 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python杀死一个线程的方法
2015/09/06 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Python中字符串与编码示例代码
2019/05/20 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
python实现控制台输出颜色
2021/03/02 Python
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
机修工岗位职责
2013/11/24 职场文书
煤矿班组长的职责
2013/12/25 职场文书
初中教师个人总结
2015/02/10 职场文书
结婚通知短信大全
2015/04/17 职场文书
海底两万里读书笔记
2015/06/26 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书