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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 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
php获取文件名后缀常用方法小结
2015/02/24 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
对python中字典keys,values,items的使用详解
2019/02/03 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
python批量修改交换机密码的示例
2020/09/22 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
校园联欢晚会主持词
2014/03/17 职场文书
《菜园里》教学反思
2014/04/17 职场文书
社会工作专业求职信
2014/07/15 职场文书
学生实习证明范文
2014/09/28 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android