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 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
javascript常用函数(2)
Nov 05 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
jquery实现轮播图特效
Apr 12 jQuery
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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 地区分类排序算法
2013/07/01 PHP
如何实现JS函数的重载
2006/09/22 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
详解Vue2的diff算法
2021/01/06 Vue.js
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
Python远程方法调用实现过程解析
2020/07/28 Python
python 实现有道翻译功能
2021/02/26 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
教师求职自荐信
2014/03/09 职场文书
入党综合考察材料
2014/06/02 职场文书
学校捐款活动总结
2015/05/09 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers