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 相关文章推荐
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
jquery实现聊天机器人
Feb 08 jQuery
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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
django 外键model的互相读取方法
2018/12/15 Python
python多线程扫描端口(线程池)
2019/09/04 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
自我鉴定书
2014/03/24 职场文书
项目合作意向书模板
2014/07/29 职场文书
天坛导游词
2015/02/02 职场文书
小学中队委竞选稿
2015/11/20 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript