ホームページ > ウェブフロントエンド > jsチュートリアル > Jqueryでページを開いた時のランダム選択切り替えを実現

Jqueryでページを開いた時のランダム選択切り替えを実現

php中世界最好的语言
リリース: 2018-05-23 11:47:35
オリジナル
2055 人が閲覧しました

今回は、ページを開くときにランダム選択の切り替えを実装するためのJqueryを紹介します。Jqueryがページを開くときにランダムな選択の切り替えを実装するための注意事項は次のとおりです。

スライドショー効果の説明: 前の 2 つのセクションとは異なり、この特殊効果はページを開いて切り替え方法 (方向) をランダムに選択できます

実行中の効果のスクリーンショットは次のとおりです:

コードは次のとおりです

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<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>

ログイン後にコピー

信じられないかもしれませんが、この記事の事例を読んだ後は、この方法をマスターしたことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQuery テーブル プラグイン データテーブルの使用方法の詳細な説明

JS JSON.stringify を実装する手順の詳細な説明

以上がJqueryでページを開いた時のランダム選択切り替えを実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
jQueryファイルをインポートする
から 1970-01-01 08:00:00
0
0
0
jQueryのプロトタイプチェーン
から 1970-01-01 08:00:00
0
0
0
Nuxt.js に jQuery をインストールする手順
から 1970-01-01 08:00:00
0
0
0
php+jqueryの問題
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート