Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)


Posted in Javascript onAugust 15, 2015

本文实例讲述了jQuery实现时尚漂亮的幻灯片特效,基本能满足你在网页上使用幻灯片(焦点图)效果。分享给大家供大家参考。具体如下:
 

幻灯片效果描述:用鼠标点击右下角数字按钮幻灯片进行左右切换进行切换。
 
运行效果截图如下:

Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)

具体实现代码:

<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();
})
</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;}
.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;}
h3.title{ font-size:16px; font-family:"微软雅黑",Verdana;}
.importInfo{ font-family:Verdana; font-size:14px;}
</style>

</head>

<body>

<li><h3><a href="index.html">默认设置效果</a></h3></li>

</ol>
 <div id="KinSlideshow" style="visibility:hidden;">
 <a target="_blank"><img src="images/22.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/4.jpg" 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/11.png" alt="Jquery幻灯片焦点图插件" width="600" height="300" /></a>
 </div>


</body>
</html>

附:所有参数列表

intervalTime:5,  //设置间隔时间为5秒 【单位:秒】 [默认为5秒]

moveSpeedTime:400 //切换一张图片所需时间,【单位:毫秒】[默认为400毫秒]

moveStyle:"left", //切换方向 可选值:【 left | right | up | down 】left:向左切换,right:向右切换,up:向上切换,down:向下切换 [默认向左切换]

mouseEvent:"mouseclick", //鼠标操作按钮事件,可选值:【mouseclick | mouseover】mouseclick:鼠标单击切换。mouseover:鼠标滑过切换。[默认为鼠标点击按钮切换]

isHasTitleBar:true, //是否显示标题背景 可选值:【 true | false 】[默认为true]

titleBar:{titleBar_height:40,titleBar_bgColor:"#000000",titleBar_alpha:0.5},//标题背景样式,(isHasTitleBar = true 前提下启用)
   
   titleBar_height :40 - > 标题背景高度。[默认:40]
   titleBar_bgColor:"#000000" - > 标题背景颜色。[默认:#000000]
   titleBar_alpha:0.5 -> 标题背景透明度,取值【0~1】。[默认:0.5]
   
isHasTitleFont:true, //是否显示标题文字 可选值:【 true | false 】[默认为true] 

titleFont:{TitleFont_size:12,TitleFont_color:"#FFFFFF",TitleFont_family:"Verdana",TitleFont_weight:"bold"}, //标题文字样式,(isHasTitleFont = true 前提下启用)  
   
   TitleFont_size - > 标题文字大小 单位像素。[默认:12]
   TitleFont_color:"#FFFFFF" - > 标题文字颜色。[默认:#000000]
   TitleFont_family:"Verdana" -> 标题文字字体。[默认:Verdana] 
   TitleFont_weight:"bold" -> 标题文字粗细。可选值:【 bold | normal 】[默认:"bold"] ,normal 正常 不加粗。 
   
isHasBtn:true, //是否显示按钮

btn:{btn_bgColor:"#666666",btn_bgHoverColor:"#CC0000",
  btn_fontColor:"#CCCCCC",btn_fontHoverColor:"#000000",btn_fontFamily:"Verdana",
  btn_borderColor:"#999999",btn_borderHoverColor:"#FF0000",
  btn_borderWidth:1,btn_bgAlpha:0.7} //按钮样式设置,(isHasBtn = true 前提下启用) 
  
  btn_bgColor:"#666666" -> 按钮背景颜色 [默认:"#666666"]。
  btn_bgHoverColor:"#CC0000" -> 按钮滑过/点击 背景颜色 [默认:"#CC0000"]。
  btn_fontColor:"#CCCCCC" -> 按钮文字颜色 [默认:"#CCCCCC"]。
  btn_fontHoverColor:"#000000" -> 按钮滑过/点击 按钮文字颜色 [默认:"#000000"]。
  btn_fontFamily:"Verdana", -> 按钮文字字体 [默认:"Verdana"]。
  btn_borderColor:"#999999" -> 按钮边框颜色 [默认:"#999999"]。
  btn_borderHoverColor:"#FF0000" -> 按钮滑过/点击 按钮边框颜色 [默认:"#FF0000"]。
  btn_borderWidth:1 -> 按钮边框宽度,单位像素 不能超过3 [默认:1]。
  btn_bgAlpha:0.7 -> 按钮透明度 ,取值【0~1】 [默认:0.7]。

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

Javascript 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
Javascript的构造函数和constructor属性
Jan 09 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
详解VueJs中的V-bind指令
May 03 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
微信小程序实现禁止分享代码实例
Oct 19 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
JavaScript的jQuery库中ready方法的学习教程
Aug 14 #Javascript
You might like
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
基于php下载文件的详解
2013/06/02 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
十条建议帮你提高Python编程效率
2016/02/16 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
python实现键盘输入的实操方法
2019/07/16 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python3 求约数的实例
2019/12/05 Python
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
工作表扬信的范文
2014/01/10 职场文书
师生聚会感言
2014/01/26 职场文书
预备党员公开承诺书
2014/05/28 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
毕业证明书
2015/06/19 职场文书
回复函范文
2015/07/14 职场文书