左右自动滚动的广告效果

上次写的是切换的 ，大致逻辑顺序是一样的，都是先实现自动播放，其次点击事件 ， 最后鼠标停留效果.

代码如下：

 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>图片的轮换</title>
 6 <style type="text/css">
 7 body, div { margin: 0; paading: 0; font-size: 12px; }
 8 ul, li { margin: 0; padding: 0; list-style: none; }
 9 
10 .box { position: relative; width: 960px; margin: 0 auto; padding-top: 15px; }
11 .b-list { position: relative; overflow: hidden; width: 600px; height: 520px; }
12 .list { position: absolute; overflow: hidden; height: 520px; }
13 .list li{ float:left; display: inline; width:600px; height: 520px; }
14 .list li img { width:600px; height: 520px; border-radius: 5px; cursor: pointer;}
15 
16 .btn { position: absolute; bottom: 0; width: 600px; height: 26px; background: #000; line-height: 26px; opacity: 0.8; filter: alpha(opacity=80); text-align: right; }
17 .btn a { padding: 2px 5px; margin: 0 2px; border: 1px solid #fff; border-radius: 2px; background: #000; color: #fff; text-decoration: none; cursor: pointer; }
18 .btn .over { background: #f00; }
19 </style>
20 
21 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
22 <script type="text/javascript">
23 //图片左右滚动，原理：设置绝对位置，根据不同的位置坐标显示不同的图片，用到jquery特效的方法：$().animate 执行一个CSS属性设置的自定义动画。
24  $(document).ready(function (){
25     var liObj = $(".list li");
26     var imgWidth = $(".list li").width();
27     var imgSum = $(".list img").size();
28     var imgrellW = imgWidth * imgSum;
29     
30     var index = 0;
31     var setTime = null;
32     var timdId = window.setInterval(start,2000);
33     
34     $(".list").css({"width": imgrellW});     
35     
36     // 自动播放 
37     function start() {
38         $(".btn a").removeClass("over");
39         $(".btn a").eq(index).addClass("over");
40         var img_position = index * imgWidth;
41         $(".list").animate({"left": -img_position}, 500);
42         
43         index++;
44         if(index >= imgSum) {
45             index = 0;
46         }
47     }
48 
49     // 鼠标点击时 显示对应的图片
50     $(".btn a").click(function() {
51         $(".btn a").removeClass("over");
52         $(this).addClass("over");
53         
54         var id = $(this).attr("rel") - 1;
55         var img_position = id * imgWidth;
56         $(".list").animate({"left": -img_position}, 200); //animate 动画的用法。后面的参数 更高的值表示更慢的动画.
57         index = id;   //记录点击当前的索引。点击过后，继续下一个循环。。。
58     });
59     
60     pause(".list li img"); // 鼠标移到图片上 停止滚动
61     
62     pause = function(obj) {
63         $(obj).hover(
64             function() { clearInterval(timdId);},
65             function() {
66                 timdId = window.setInterval(start,2000);
67             }
68         );
69     }
70         
71  });
72  
73 </script>
74 </head>
75 
76 <body>  
77 <div class="box" id="box">
78 <div class="b-list">
79  <ul class="list">
80  <li><img src="images/p1.jpg" /></li>
81  <li><img src="images/p2.jpg" /></li>
82  <li><img src="images/p3.jpg" /></li>
83  <li><img src="images/p4.jpg" /></li>
84  </ul>
85 </div>
86  <div class="btn" id="btn">
87  <a href="javascript:void(0)" class="over" rel="1">1</a><a href="javascript:void(0)" rel="2">2</a><a href="javascript:void(0)" rel="3">3</a><a href="javascript:void(0)"rel="4">4</a>
88  </div>
89 </div>
90 
91 </body>
92 </html>
posted @ 2011-08-22 17:51  limanclear  Views(532)  Comments(0)    收藏  举报