ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScriptを使用して画像を左右に切り替える効果を実現します

JavaScriptを使用して画像を左右に切り替える効果を実現します

不言
リリース: 2018-06-25 16:47:28
オリジナル
2907 人が閲覧しました

この記事では主にJavaScriptに基づいた画像の左右切り替え効果を紹介します。興味のある方は参考にしてください。

この記事では画像の左右切り替え効果を実現するための詳細なコードを紹介します。内容は次のとおりです

特定のコード:

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

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

<html>

  <head>

    <title>JS图片左右切换效果</title>

    <meta charset="utf-8"/>

    <style type="text/css">

      *{

        margin:0;

        padding:0;      

      }   

          

      .images-scroll{

        border:1px solid #CCC;

        margin:100px auto;

        width:300px;

        height:200px;

        position:relative;

      

        

      .images-scroll ul{

        list-style:none;

      }

  

      .images-scroll li{

        float:left;

        display:none;     

      }

  

      .images-scroll .active{

        display:block;

      }

  

      .images-scroll a{

          

      }

  

      .images-scroll img{

        width:300px;

        height:200px;

        border:none;

      }           

        

      .images-scroll .left-scroll{

        position:absolute;

        top:40%;

        left:-40px;

        opacity:0;

        background:url("images/bg_direction_nav.png");

        background-repeat:no-repeat;

        background-position:0px 0px;

        height:27px;

        width:27px;

        cursor:pointer;

      }

  

      .images-scroll .right-scroll{

        position:absolute;

        top:40%;

        opacity:0;

        right:-40px;

        background:url("images/bg_direction_nav.png");

        background-repeat:no-repeat;

        background-position:-30px 0px;

        height:27px;

        cursor:pointer;

        width:27px;      

      

  

      .images-scroll .right-scroll:hover{

        background-color:transparent;

      }

  

    </style>

    <script src="jquery-1.8.2.js"></script>

  </head>

  <body>

      

    <p id="images-scroll" class="images-scroll">

      <ul>

        <li class="active"><a href=""><img src="images/1.jpg" alt=""></a></li>

        <li><a href=""><img src="images/2.jpg" alt=""></a></li>

        <li><a href=""><img src="images/3.jpg" alt=""></a></li>

        <li><a href=""><img src="images/4.jpg" alt=""></a></li>

      </ul>

      <span id="left-scroll" class="left-scroll"></span>

      <span id="right-scroll" class="right-scroll"></span>

    </p>

    <script type="text/javascript"

  

      $("#images-scroll").mouseover(function(){

        $("#left-scroll").animate({left: &#39;10px&#39;,opacity:&#39;1&#39;,},400);

        $("#right-scroll").animate({right: &#39;10px&#39;,opacity:&#39;1&#39;,},400);

      })

      $("#images-scroll").mouseleave(function(){

        $("#left-scroll").animate({left: &#39;-40px&#39;,opacity:&#39;0&#39;,},400);

        $("#right-scroll").animate({right: &#39;-40px&#39;,opacity:&#39;0&#39;,},400);       

      })

  

      imgScroll=setInterval("runScroll()",3000);

      var last_idx=$("#images-scroll ul li").index($("#images-scroll ul li:last"));

      function runScroll(){         

        var idx=$("#images-scroll ul li").index($("#images-scroll ul .active")[0]);

        $("#images-scroll li").eq(idx).removeClass("active").hide();

        idx+=1;

        if(idx%(last_idx+1)==0){

          idx=0;

        }

        $("#images-scroll li").eq(idx).addClass("active").show();

      }

      $("#left-scroll").click(function(){

        var idx=$("#images-scroll ul li").index($("#images-scroll ul .active")[0]);

        $("#images-scroll li").eq(idx).removeClass("active").hide();

        idx-=1;

        if(idx==-1){

          idx=last_idx;

        }

        $("#images-scroll li").eq(idx).addClass("active").show();

      })

      $("#right-scroll").click(function(){

        runScroll();

      })    

    </script>

      

  </body>

</html>

ログイン後にコピー

以上がこの記事の全内容です。皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

jQuery と CSS3 は、フローティング効果のある模造花びらネットの固定上部位置ナビゲーション メニューを実装します


JavaScript は、画像のウォーターフォール フローの動的読み込みを実装します


JS は、モバイルで左にスライドするときの削除を実装します端末ボタン機能


以上がJavaScriptを使用して画像を左右に切り替える効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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