基于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 相关文章推荐
传智播客学习之JavaScript基础篇
Nov 13 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
vue实现计算器功能
Feb 22 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 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
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Django框架中方法的访问和查找
2015/07/15 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
Python中new方法的详解
2019/01/15 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python语法分析之字符串格式化
2019/06/13 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
家长学校教学计划
2015/01/19 职场文书
涨价通知怎么写
2015/04/23 职场文书
天堂的孩子观后感
2015/06/11 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android