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 相关文章推荐
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python每天定时运行某程序代码
2019/08/16 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
Python实现自动整理文件的脚本
2020/12/17 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
ajax是什么及其工作原理
2012/02/08 面试题
保健品市场营销方案
2014/03/31 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
2014年服务员工作总结
2014/11/18 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
退休教师追悼词
2015/06/23 职场文书