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 相关文章推荐
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
shiro授权的实现原理
Sep 21 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
vue+moment实现倒计时效果
Aug 26 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
Node.js学习入门
2017/01/03 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
python日志模块logbook使用方法
2019/09/19 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
python 操作hive pyhs2方式
2019/12/21 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
python圣诞树编写实例详解
2020/02/13 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
医院护士的求职信范文
2013/12/26 职场文书
国际会议邀请函范文
2014/01/16 职场文书
农业项目建议书
2014/08/25 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python