each()的用法

来源：互联网发布：杭州阿里云办公地址编辑：程序博客网时间：2024/05/21 12:45
<!doctype html><html><head><title>each()的用法</title><meta charset="utf-8"><style type="text/css">              * {padding:0px; margin:0px;}              .roll {width:580px;height:290px;position:relative;overflow:hidden;}              .roll_num li.roll_num_hover {background:#dc282b;color:#fff;}              .roll_pic{ position:absolute;top:0;left:0; height:290px;width:580px;}              .roll_num {position:absolute;bottom:25px;margin-right:5px;float:right;z-index:10;}              .roll_num li {list-style:none;float:left;font-size:12px;font-weight:600;width:18px;height:18px;line-height:18px;cursor:pointer;margin:0 3px;text-align:center;color:#dc282b;background:#fff;-moz-border-radius:8px;border-radius:8px;}                    </style>  <script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script></head><body><div class="roll">              <div class="roll_pic">                  <a href="http://www.875.cn/" target="_blank"><img src="http://pic.875.cn/upload/2013-05-22/1751132091.jpg"></a>                  <a href="http://www.875.cn/" target="_blank"><img src="http://pic.875.cn/upload/2013-03-26/1504517406.jpg" ></a>                  <a href="http://www.875.cn/" target="_blank"><img src="http://pic.875.cn/upload/2013-04-12/1003432197.jpg"></a>              </div>                            <div class="roll_num">                  <ul>                      <li class="roll_num_hover">1</li>                      <li>2</li>                      <li>3</li>                  </ul>              </div>  <script type="text/javascript">$(function(){$(".roll_num li ").each(function(i){$(this).mouseover(function(){$(".roll_pic img").hide();$(".roll_pic img").eq(i).show();$(this).addClass("roll_num_hover").siblings().removeClass("roll_num_hover");});});});</script></body></html>
0 0