Maison > Article > interface Web > Jquery réalise un changement de sélection aléatoire lors de l'ouverture de la page

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

php中世界最好的语言original: 2018-05-23 11:47:351958parcourir

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>

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!

php json jquery JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des étapes pour implémenter un tableau avec des cases à cocher à l'aide de jqueryArticle suivant：Explication détaillée des étapes pour implémenter un tableau avec des cases à cocher à l'aide de jquery

Articles Liés

Voir plus