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 相关文章推荐
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
详解Python中的各种函数的使用
2015/05/24 Python
Python面向对象之继承代码详解
2018/01/29 Python
遗传算法python版
2018/03/19 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Django接收自定义http header过程详解
2019/08/23 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
python实现数字炸弹游戏程序
2020/07/17 Python
实习心得体会
2014/01/02 职场文书
大学生毕业鉴定
2014/01/31 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
运动会开幕式主持词
2014/03/28 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
支部鉴定材料
2014/06/02 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
职代会闭幕词
2015/01/28 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
python数字图像处理:图像的绘制
2022/06/28 Python