基于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 高级篇之函数 (四)
Apr 07 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
理解javascript封装
Feb 23 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
Vue中keep-alive组件作用详解
Feb 04 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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
PHP 学习路线与时间表
2010/02/21 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
(function(){})()的用法与优点
2007/03/11 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
python获取中文字符串长度的方法
2018/11/14 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python能做什么 python的含义
2019/10/12 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
python路径的写法及目录的获取方式
2019/12/26 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
python简单实现插入排序实例代码
2020/12/16 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
什么是lambda函数
2013/09/17 面试题
毕业生简历自我评价范文
2014/04/09 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
个人总结怎么写
2015/02/26 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis