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 相关文章推荐
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 Javascript
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
神族 PROTOSS 概述
2020/03/14 星际争霸
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
深入了解query和params的使用区别
2019/06/24 Javascript
vue实现记事本功能
2019/06/26 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
理解Python垃圾回收机制
2016/02/12 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
服务之星获奖感言
2014/01/21 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
高中同学会致辞
2015/08/01 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
TS 类型兼容教程示例详解
2022/09/23 Javascript