recherche

Maison >interface Web >js tutoriel >Partage de code d'effets spéciaux du diaporama Jquery - ouvrez la page et sélectionnez au hasard la méthode de commutation (3)_jquery

Partage de code d'effets spéciaux du diaporama Jquery - ouvrez la page et sélectionnez au hasard la méthode de commutation (3)_jquery

WBOY
WBOYoriginal
2016-05-16 15:44:581196parcourir

Cet article présente principalement jQuery pour implémenter une carte de focus de diapositive, qui peut obtenir un effet de diapositive très éblouissant et à la mode. Il est d'une grande valeur pratique et peut essentiellement vous satisfaire d'utiliser des effets de diapositive (carte de focus) sur les pages Web. en avez besoin Vous pouvez vous référer à ce qui suit

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'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Partage de code deffets spéciaux du diaporama Jquery - ouvrez la page et sélectionnez au hasard la méthode de commutation (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="Partage de code deffets spéciaux du diaporama Jquery - ouvrez la page et sélectionnez au hasard la méthode de commutation (3)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/23.png" alt="Partage de code deffets spéciaux du diaporama Jquery - ouvrez la page et sélectionnez au hasard la méthode de commutation (3)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/4.jpg" alt="Partage de code deffets spéciaux du diaporama Jquery - ouvrez la page et sélectionnez au hasard la méthode de commutation (3)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/5.jpg" alt="Partage de code deffets spéciaux du diaporama Jquery - ouvrez la page et sélectionnez au hasard la méthode de commutation (3)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
  <a target="_blank"><img src="images/22.png" alt="Partage de code deffets spéciaux du diaporama Jquery - ouvrez la page et sélectionnez au hasard la méthode de commutation (3)_jquery"    style="max-width:90%"  style="max-width:90%" /></a>
 </div>
  
</body>
</html>

J'espère que cet article sera utile à la conception d'effets spéciaux Jquery de chacun.

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：js implémente l'effet de masquer la boîte de connexion lorsque la case à cocher sélectionne les compétences login_javascript anonymesArticle suivant：js implémente l'effet de masquer la boîte de connexion lorsque la case à cocher sélectionne les compétences login_javascript anonymes

Articles Liés

Voir plus