Jquery slideshow special effects code sharing--open the page and randomly select the switching method (3)

Jquery slideshow special effects code sharing--open the page and randomly select the switching method (3)_jquery

WBOY

Release： 2016-05-16 15:44:58

Original

1218 people have browsed it

This article mainly introduces jQuery to implement slide focus map, which can achieve a very dazzling and fashionable slide effect. It is of great practical value and can basically satisfy you to use slide (focus map) effects on web pages. Friends who need it You can refer to the following

Slideshow effect description: Different from the previous two sections, this special effect can open the page and randomly select the switching method (direction)

The screenshot of the running effect is as follows:

The specific code is as follows

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery slideshow special effects code sharing--open the page and randomly select the switching method (3)_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 slideshow special effects code sharing--open the page and randomly select the switching method (3)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/23.png" alt="Jquery slideshow special effects code sharing--open the page and randomly select the switching method (3)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/4.jpg" alt="Jquery slideshow special effects code sharing--open the page and randomly select the switching method (3)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/5.jpg" alt="Jquery slideshow special effects code sharing--open the page and randomly select the switching method (3)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/22.png" alt="Jquery slideshow special effects code sharing--open the page and randomly select the switching method (3)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
 </div>
  
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s Jquery special effects design.