Jquery réalise un changement de sélection aléatoire lors de l'ouverture de la page-js tutoriel-php.cn

Jquery réalise un changement de sélection aléatoire lors de l'ouverture de la page

php中世界最好的语言

Libérer： 2018-05-23 11:47:35

original

1980 Les gens l'ont consulté

Cette fois, je vous présente Jquery pour implémenter le changement de sélection aléatoire lors de l'ouverture d'une page. Quelles sont les précautions que Jquery met en œuvre pour implémenter le changement de sélection aléatoire lors de l'ouverture d'une page. cas pratiques. Jetons un coup d'oeil une fois.

Description de l'effet diaporama : Différent des deux sections précédentes, cet effet spécial peut ouvrir la page et sélectionner aléatoirement la méthode de commutation (direction)

La capture d'écran de l'exécution L'effet est le suivant :

Le code spécifique est le suivant

<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>
 <p 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>
 </p>  
</body>
</html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation des tables de données du plug-in de table jQuery

Explication détaillée des étapes pour implémenter JSON.stringify avec JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!