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 相关文章推荐
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
AudioContext 实现音频可视化(web技术分享)
Feb 24 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
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
降低PHP Redis内存占用
2017/03/23 PHP
php取出数组单个值的方法
2018/03/12 PHP
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
总结Python编程中函数的使用要点
2016/03/20 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python同时替换多个字符串方法示例
2019/09/17 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
Django的CVB实例详解
2020/02/10 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
python中数字是否为可变类型
2020/07/08 Python
在职人员函授期间自我评价分享
2013/11/08 职场文书
社区包粽子活动方案
2014/01/21 职场文书
公司合作意向书
2014/04/01 职场文书
教师批评与自我批评
2014/10/15 职场文书
2014年学生工作总结
2014/11/20 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
九年级化学教学反思
2016/02/22 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书