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常用对象的方法和属性小结
Jan 24 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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的in_array低性能问题
2013/09/17 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
js function定义函数使用心得
2010/04/15 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
国培计划培训感言
2014/03/11 职场文书
内勤主管岗位职责
2014/04/03 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
Java实现多线程聊天室
2021/06/26 Java/Android