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来实现动画导航效果的代码
Dec 16 Javascript
javascript 写类方式之一
Jul 05 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
js面向对象编程总结
Feb 16 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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
星际RPG字典
2020/03/04 星际争霸
中东人咖啡哲学
2021/03/03 咖啡文化
图书管理程序(二)
2006/10/09 PHP
php木马攻击防御之道
2008/03/24 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
php获取excel文件数据
2017/04/21 PHP
php新建文件的方法实例
2019/09/26 PHP
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
python安装教程
2018/02/28 Python
python解析xml简单示例
2019/06/21 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
python 模拟登陆163邮箱
2020/12/15 Python
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
回门宴新郎答谢词
2014/01/12 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2014年团委工作总结
2014/11/13 职场文书
运动会5000米加油稿
2015/07/21 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
三十年同学聚会感言
2015/07/30 职场文书
《刷子李》教学反思
2016/02/20 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python