each()的用法

最新推荐文章于 2021-06-30 17:42:19 发布

阿聪世家

最新推荐文章于 2021-06-30 17:42:19 发布

阅读量493

点赞数

分类专栏：网站常用jquery效果文章标签： web前端开发 jQuery

本文链接：https://blog.csdn.net/congcong875/article/details/49404331

版权

网站常用jquery效果专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!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>