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 相关文章推荐
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
js实现直播点击飘心效果
Aug 19 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入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
Node.js简单入门前传
2017/08/21 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
js实现双色球效果
2020/08/02 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
python执行get提交的方法
2015/04/29 Python
python处理xml文件的方法小结
2017/05/02 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
Django中的Model操作表的实现
2018/07/24 Python
python实现三维拟合的方法
2018/12/29 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
Python如何绘制日历图和热力图
2020/08/07 Python
实习教师自我鉴定
2013/09/27 职场文书
项目经理岗位职责
2013/11/11 职场文书
音乐器材管理制度
2014/01/31 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
2014年底个人工作总结
2015/03/10 职场文书
活动费用申请报告
2015/05/15 职场文书
党员公开承诺书2016
2016/03/24 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript