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 判断代码全收集
Apr 28 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
详解vue axios中文文档
Sep 12 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 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
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP链表操作简单示例
2016/10/15 PHP
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python 获取et和excel的版本号
2009/04/09 Python
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Django 前后台的数据传递的方法
2017/08/08 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python imread、newaxis用法详解
2019/11/04 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
升职自荐信
2013/11/28 职场文书
函授生自我鉴定
2014/03/25 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
民间借贷协议书范本
2014/10/01 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏