search

Home >Web Front-end >JS Tutorial >Jquery slideshow special effects code sharing--open the page and randomly select the switching method (3)_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:44:581219browse

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>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js implements the effect of hiding the login box when the check box selects anonymous login_javascript skillsNext article：js implements the effect of hiding the login box when the check box selects anonymous login_javascript skills

Related articles

See more