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中的Document文档对象
Jan 16 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
vue中实现图片压缩 file文件的方法
May 28 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计算2点经纬度之间的距离代码
2013/08/12 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python实现ip代理池功能示例
2019/07/05 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
高三体育教学反思
2014/01/29 职场文书
护士长竞聘书
2014/03/31 职场文书
爬山的活动方案
2014/08/16 职场文书
连锁超市项目计划书
2014/09/15 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
健康教育主题班会
2015/08/14 职场文书
交通安全教育心得体会
2016/01/15 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
MySQL 开窗函数
2022/02/15 MySQL