jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)


Posted in Javascript onNovember 18, 2020

这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,具体如下

幻灯片效果描述:用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换。

自定义切换参数效果:向下切换、切换时间为8秒、鼠标滑过按钮时切换 

运行效果截图如下:

jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)

具体代码如下

<head>

<title>Jquery幻灯片焦点图插件</title>
<script src="js/jquery-1.4a2.min.js" type="text/javascript"></script>
<script src="js/jquery.-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $("#KinSlideshow").KinSlideshow({
 moveStyle:"down",
 intervalTime:8,
 mouseEvent:"mouseover",
 titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"}
 });
})
</script>
<style type="text/css">
.code{ height:auto; padding:20px; border:1px solid #9EC9FE; background:#ECF3FD;}
.code pre{ font-family:"Courier New";font-size:14px;}
.code pre code.note{ color:#999}
.code2{border:1px solid #FEB0B0; background:#FFF1F1; margin-top:10px;}
.code2 pre{ margin-left:20px; font-size:12px;}
.info{ font-size:12px; color:#666666; font-family:Verdana; margin:20px 0 50px 0;}
.info p{ margin:0; padding:0; line-height:22px; text-indent:40px;}
h2.title{ margin:0; padding:0; margin-top:50px; font-size:18px; font-family:"微软雅黑",Verdana;}
h2.title span.titleInfo{ font-size:12px; color:#333; margin-left:10px;font-family:Verdana;}
h3.title{ font-size:16px; font-family:"微软雅黑",Verdana;}
.importInfo{ font-family:Verdana; font-size:14px;}
</style>

</head>

<body>

<li><h3><a href="demo2.html">自定义切换参数效果</a></h3></li>
</ol>
 <div id="KinSlideshow" style="visibility:hidden;">
 <a target="_blank"><img src="images/11.png" alt="Jquery幻灯片焦点图插件" width="600" height="300" /></a>
 <a target="_blank"><img src="images/23.png" alt="Jquery幻灯片焦点图插件" width="600" height="300" /></a>
 <a target="_blank"><img src="images/22.png" alt="Jquery幻灯片焦点图插件" width="600" height="300" /></a>
 <a target="_blank"><img src="images/5.jpg" alt="Jquery幻灯片焦点图插件" width="600" height="300" /></a>
 <a target="_blank"><img src="images/4.jpg" alt="Jquery幻灯片焦点图插件" width="600" height="300" /></a>
 </div>

</body>
</html>

希望本文所述对大家的Jquery特效设计有所帮助。

Javascript 相关文章推荐
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
Vue如何清空对象
Mar 03 Vue.js
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 #Javascript
js漂浮广告实现代码
Aug 15 #Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 #Javascript
针对初学者的jQuery入门指南
Aug 15 #Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 #Javascript
在jQuery中处理XML数据的大致方法
Aug 14 #Javascript
JavaScript中var关键字的使用详解
Aug 14 #Javascript
You might like
删除无限级目录与文件代码共享
2006/07/12 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php中final关键字用法分析
2016/12/07 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
vue element实现表格合并行数据
2020/11/30 Vue.js
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python部署web开发程序的几种方法
2017/05/05 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python批量处理文件或文件夹
2020/07/28 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
缓刑人员的思想汇报
2014/01/11 职场文书
上班上网检讨书
2014/01/29 职场文书
大学生作弊检讨书
2014/02/19 职场文书
广播体操比赛口号
2014/06/10 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书