基于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 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
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
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
Node.js实现数据推送
2016/04/14 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python中pycurl库的用法实例
2014/09/30 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python字节单位转换实例
2019/12/05 Python
材料成型专业个人求职信范文
2013/09/25 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
小学学习委员竞选稿
2015/11/20 职场文书