Jquery幻灯片特效代码分享打开页面随机选择切换方式（3）
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Jquery幻灯⽚特效代码分享打开页⾯随机选择切换⽅式
（3）
这篇⽂章主要介绍了jQuery实现幻灯⽚焦点图，可实现⾮常炫⽬时尚的幻灯⽚效果，⾮常具有实⽤价值，基本能满⾜你在⽹页上使⽤幻灯⽚(焦点图)效果，需要的朋友可以参考下
幻灯⽚效果描述：与前两节不同的是，这款特效可以打开页⾯随机选择切换⽅式（⽅向）
运⾏效果截图如下：
具体代码如下
<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="" width="600" height="300" /></a>
<a target="_blank"><img src="images/23.png" alt="" width="600" height="300" /></a>
<a target="_blank"><img src="images/4.jpg" alt="" width="600" height="300" /></a>
<a target="_blank"><img src="images/5.jpg" alt="" width="600" height="300" /></a>
<a target="_blank"><img src="images/22.png" alt="" width="600" height="300" /></a>
</div>
</body>
</html>
希望本⽂所述对⼤家的Jquery特效设计有所帮助。