jqueryは広告バースライド効果を実現します。
36940 ワード
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Untitled Document</title>
6 <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
7 <style type="text/css">
8 *{
9 margin:0px;
10 padding:0px;}
11
12 body{
13 width:auto;
14 height:auto;
15 }
16 .ad{
17 width:586px;
18 height:400px;
19 overflow:hidden;
20 position:relative;
21 }
22 .menu{
23 position:absolute;}
24 .menu li,.number li{
25 list-style:none;
26 cursor:pointer;
27 display:inline-block;
28 }
29 .menu li img{
30 width:586px;
31 height:400px;}
32 .number{
33 width:110px;
34 height:20px;
35 position:absolute;
36 right:5px;
37 bottom:5px;}
38 .number li{
39 width:20px;
40 height:inherit;
41 text-align:center;
42 float:left;
43 line-height:20px;
44 margin-left:2px;
45 cursor:default;}
46 .leave{
47 background-color:#C0F;
48 }
49 .on{
50 background-color:#F36;}
51 </style>
52
53 </head>
54
55 <body>
56 <div style="width:auto; height:30px; background:#CF9">
57 <p> </p>
58 </div>
59 <div class="ad">
60 <ul class="menu">
61 <li><img src="Images/ads/1.jpg" /></li>
62 <li><img src="Images/ads/2.jpg" /></li>
63 <li><img src="Images/ads/3.jpg" /></li>
64 <li><img src="Images/ads/4.jpg" /></li>
65 <li><img src="Images/ads/5.jpg" /></li>
66 </ul>
67 <ul class="number">
68 <li class="leave" id="1">1</li>
69 <li class="leave" id="2">2</li>
70 <li class="leave" id="3">3</li>
71 <li class="leave" id="4">4</li>
72 <li class="leave" id="5">5</li>
73 </ul>
74 </div>
75 <div style="width:auto; height:30px; background:#CF9;">
76 <p> </p>
77 </div>
78 </body>
79 </html>
80 <script type="text/javascript">
81 var index = 0;
82 var num = $(".menu li img").length;
83 var height = $(".ad").height();
84 var timer;
85 $(function(){
86 $("img").click(function(e) {
87 window.open("http://www.cnblogs.com/JohnnyYin/"," ","");
88 });
89 $("#1").addClass("on");
90 $(".number li").mouseover(function(e) {
91 clearInterval(timer);
92 $("#"+index).removeClass("on");
93 $(this).addClass("on");
94 index = $(this).index();
95 if(index >= num)
96 index = 0;
97 $(".menu").stop().animate({top:-height*index},1000);
98 }).mouseleave(function(e) {
99 $(this).removeClass("on");
100 index = $(this).index();
101 AutoPlay();
102 timer = setInterval(AutoPlay,2000);
103 });
104 timer = setInterval(AutoPlay,2000);
105 })
106 function AutoPlay()
107 {
108 $("#"+index).removeClass("on");
109 if(index >= num)
110 index = 0;
111 $(".menu").stop().animate({top:-height*index},1000);
112 index++;
113 $("#"+index).addClass("on");
114 }
115 </script>この効果を達成するための鍵関数と方法：1.set Interval（AutoPlay，2000）。ある方法は時間ごとに実行されます。
2.「.menu」.stop().animate({top:-height*index}1000); jqueryのstop（）とanimate（）方法。
3.clear Interval（timer）set Intervalをクリアする方法。スタイルの黄色の背景部分に注意してください。この組み合わせのスタイルは重複しています。このような提示効果は、div領域内の画像のみが表示されるので、画像サイズもdivサイズと一致するように設定したほうが良い。
