基于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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
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中设置session用memcache来存储的方法总结
2016/01/14 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
js验证表单第二部分
2006/11/25 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python使用进程Process模块管理资源
2020/03/05 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
迪奥美国官网:Dior美国
2019/12/07 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
单位委托书怎么写
2014/09/21 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
工作检讨书范文
2015/01/23 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL
mysql如何查询连续记录
2022/05/11 MySQL