ホームページ > ウェブフロントエンド > jsチュートリアル > js画像カルーセル特殊効果コード共有_javascriptスキル

js画像カルーセル特殊効果コード共有_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 15:40:19
オリジナル
1511 人が閲覧しました

この記事の例では js 画像カルーセル効果について説明していますので、ご参考までに共有したいと思います。詳細は以下の通りです。
これは、JavaScript をベースにした画像カルーセル特殊効果コードです。サムネイルとタイトルがあり、タイトルはカスタマイズできます。
レンダリングの実行: -------------------------------------- -------------------------------------------------- ---------------

ヒント: ブラウザが正常に動作しない場合は、閲覧モードを切り替えてみてください。

あなたと共有された js 画像カルーセル特殊効果コードは次のとおりです



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

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>js图片轮播特效</title>

<link rel="stylesheet" type="text/css" href="common.css" />

<link href="zixun.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-1.5.min.js"></script>

 

<!--焦点图 js-->

<script src="zhanlan_qh.js" type="text/javascript"></script>

</head>

 

<body>

<style>

ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;}

ul#bcty365_nav li{float:left; display:inline; margin:10px;}

ul#bcty365_nav li a{display:block;color:#000000; font-size:16px;}

ul#bcty365_nav li a,#wimoban_p,#wimoban_p a{ font-family:"微软雅黑";}

ul#bcty365_nav li a:hover,#wimoban_p a:hover{color:red;}

</style>

 

 

<!--焦点图-->

 <div class="newtu">

   <div id="inner3">

  <div class="hot-event3">

   <div class="switch-nav3">

    <a href="#" onclick="return false;" class="prev">

     <i class="ico i-prev"></i>

    </a>

    <a href="#" onclick="return false;" class="next">

     <i class="ico i-next"></i>

    </a> 

   </div>

   <div class="event-item3" style="display: block;">

    <a target="_blank" href="#" class="banner">

     <img src="img_01.jpg"/>

    </a>

    <p></p>

    <h2><a target="_blank" href="#">盛华厚:得天独"厚"的多面</a></h2>

   </div>

   <div class="event-item3" style="display: none;">

    <a target="_blank" href="#" class="banner">

     <img src="img_02.jpg" />

    </a>

    <p></p>

    <h2><a target="_blank" href="#">2盛华厚:得天独"厚"的多面</a></h2>

   </div>

   <div class="event-item3" style="display: none;">

    <a target="_blank" href="#" class="banner">

     <img src="img_03.jpg" />

    </a>

    <p></p>

    <h2><a target="_blank" href="#">3盛华厚:得天独"厚"的多面</a></h2>

   </div>

   <div class="event-item3" style="display: block;">

    <a target="_blank" href="#" class="banner">

     <img src="img_01.jpg"/>

    </a>

    <p></p>

    <h2><a target="_blank" href="#">盛华厚:得天独"厚"的多面</a></h2>

   </div>

   <div class="switch-tab3">

    <a href="#" onclick="return false;" class="current3"><img src="img_01.jpg"/></a><a href="#" onclick="return false;"><img src="img_02.jpg"/></a><a href="#" onclick="return false;"><img src="img_03.jpg"/></a><a href="#" onclick="return false;"><img src="img_01.jpg"/></a>

   </div>

  </div>

  <script type="text/javascript">

  $('#inner3').nav3({ t: 4000, a: 1000 });//参数t:是间隔轮换时间,参数a:是轮换所需要时间

  </script>

 </div>

  </div>

  

 

</body>

</html>

ログイン後にコピー
上記は、JavaScript 画像カルーセルの特殊効果コードです。気に入っていただき、実際に適用していただければ幸いです。
関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート