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 相关文章推荐
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
js命名空间写法示例
Dec 18 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python+pyqt实现12306图片验证效果
2017/10/25 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
实习生自荐信范文
2013/11/13 职场文书
新员工欢迎词
2014/01/12 职场文书
普通员工辞职信
2014/01/17 职场文书
业务员自荐信范文
2014/04/20 职场文书
新年晚会开场白
2015/05/29 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers
Flink 侧流输出源码示例解析
2022/09/23 Servers