图片滑动轮换效果 

  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2 <head>
  3 <title>iammrwoo</title>
  4 
  5 <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
  6 
  7 <script type="text/javascript">
  8 
  9 
 10 $(document).ready(function(){
 11 
 12 var page = 1;
 13  var i = 3; //每版放4个图片
 14  //向后 按钮
 15  $("span.next").click(function(){ //绑定click事件
 16  var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
 17  var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
 18  var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
 19  var v_width = $v_content.width() ;
 20  var len = $v_show.find("li").length;
 21  var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数
 22  if( page == page_count ){ //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
 23  $v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
 24  page = 1;
 25  }else{
 26  $v_show.animate({ left : '-='+v_width }, "slow"); //通过改变left值，达到每次换一个版面
 27  page++;
 28  }
 29  $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
 30  });
 31  //往前 按钮
 32  $("span.prev").click(function(){
 33  var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
 34  var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
 35  var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
 36  var v_width = $v_content.width();
 37  var len = $v_show.find("li").length;
 38  var page_count = Math.ceil(len / i) ; //只要不是整数，就往大的方向取最小的整数
 39  if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画
 40  if( page == 1 ){ //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
 41  $v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
 42  page = page_count;
 43  }else{
 44  $v_show.animate({ left : '+='+v_width }, "slow");
 45  page--;
 46  }
 47  }
 48  $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
 49  });
 50  })
 51  
 52 </script>
 53 
 54 <style type="text/css">
 55  .v_show
 56  {
 57  height: 146px;
 58  background: url(images/imgBox.gif) no-repeat;
 59  margin-top: 10px;
 60  position: relative;
 61  }
 62  .v_show .prev
 63  {
 64  display: block;
 65  position: absolute;
 66  left: 1px;
 67  top: 45px;
 68  width: 14px;
 69  height: 47px;
 70  cursor: pointer;
 71  }
 72  .v_show .next
 73  {
 74  display: block;
 75  position: absolute;
 76  right: 3px;
 77  top: 45px;
 78  width: 14px;
 79  height: 47px;
 80  cursor: pointer;
 81  }
 82  .v_content
 83  {
 84  position: relative;
 85  width: 845px;
 86  height: 130px;
 87  margin: 2px auto;
 88  overflow: hidden;
 89  }
 90  .v_content_list
 91  {
 92  position: absolute;
 93  width: 2500px;
 94  top: 0px;
 95  left: 0px;
 96  }
 97  .v_content ul
 98  {
 99  float: left;
100  padding: 0;
101  margin: 0;
102  list-style: none;
103  }
104  .v_content ul li
105  {
106  float: left;
107  display: inline;
108  margin: 0 10px;
109  }
110  .v_content ul li a
111  {
112  display: block;
113  display: inline;
114  float: left;
115  margin: 25px 10px;
116  }
117  .v_content .imgtext
118  {
119  width: 135px;
120  margin-top: 20px;
121  float: left;
122  display: inline;
123  }
124  .v_content .imgtext h1
125  {
126  font-size: 12px;
127  padding: 5px 0;
128  margin: 0;
129  color: #336699;
130  }
131  .v_content .imgtext p
132  {
133  padding: 0;
134  margin: 0;
135  font-size: 12px;
136  line-height: 20px;
137  }
138  </style>
139 
140 </head>
141 <body>
142  <form id="form1" runat="server">
143  <div class="v_show">
144  <span class="prev">
145  <img src="images/leftbutton.gif" /></span> <span class="next">
146  <img src="images/rightbutton.gif" /></span>
147  <div class="v_content">
148  <div class="v_content_list">
149  <ul>
150  <%for (int i = 0; i < picpaths.Count; i++)
151  {%>
152  <li style="float: left"> 
153 <img src="ad/<%=picpaths[i] %>" id="Img1" width="186" height="126" alt="图片名称" />
154  </li>
155  <%} %>
156  </ul>
157  </div>
158  </div>
159  </div>
160  </form>
161 </body>
162 </html>

 

 

posted @ 2012-02-10 13:37  捂汗  阅读(554)  评论(0)    收藏  举报