Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)


Posted in Javascript onAugust 15, 2015

这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,需要的朋友可以参考下

幻灯片效果描述:与前两节不同的是,这款特效可以打开页面随机选择切换方式(方向)
 
运行效果截图如下:

Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)

具体代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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">

//打开页面随机选择 切换方式(方向),怕增大KinSlideshow.js文件 就没把随机切换写到里面。
//使用时如有需要随机自己写在前面是一样的。而且还可以只固定随机切换哪几种。

var moveStyle
var rand =parseInt(Math.random()*4)
switch(rand){
 case 0: moveStyle="left" ;break;
 case 1: moveStyle="right" ;break;
 case 2: moveStyle="down" ;break;
 case 3: moveStyle="up" ;break;
}
$(function(){
 $("#KinSlideshow1").KinSlideshow({moveStyle:moveStyle});
 
})
</script>
<style type="text/css">
#KinSlideshow{ overflow:hidden; width:600px; height:300px;}
</style>

</head>

<body>

<h2>打开页面随机选择切换方式(方向)---刷新看看 ^_^</h2>
 <div id="KinSlideshow1" style="visibility:hidden;">
  <a target="_blank"><img src="images/11.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/22.png" alt="Jquery幻灯片焦点图插件" width="600" height="300" /></a>
 </div>
  
</body>
</html>

希望本文所述对大家的Jquery特效设计有所帮助。

Javascript 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 #Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 #Javascript
js漂浮广告实现代码
Aug 15 #Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 #Javascript
针对初学者的jQuery入门指南
Aug 15 #Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 #Javascript
在jQuery中处理XML数据的大致方法
Aug 14 #Javascript
You might like
Firefox outerHTML实现代码
2009/06/04 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
Express.JS使用详解
2014/07/17 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python发送Email方法实例
2014/08/21 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
python logging设置level失败的解决方法
2020/02/19 Python
Python bytes string相互转换过程解析
2020/03/05 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
暑期实习鉴定
2013/12/16 职场文书
毕业生自荐书模版
2014/01/04 职场文书
敬老院标语
2014/06/27 职场文书
无房证明范本
2014/09/17 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL