我的第一个jq效果

最新推荐文章于 2021-01-12 13:40:34 发布

wangxiaohui6687

最新推荐文章于 2021-01-12 13:40:34 发布

阅读量915

点赞数

分类专栏： jquary 文章标签： stylesheet function xhtml border css float

本文链接：https://blog.csdn.net/wangxiaohui6687/article/details/7621848

版权

jquary 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="css.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
   <script type="text/javascript">
       $(function(){
           //alert($("ol li").length);
               $("ol li").each(function(){ //ol中的每一个li
                       $(this).mouseover(function(){
                               $(this).addClass("active").siblings().removeClass("active"); //鼠标放上就增加一个为active的类，siblings指其他的类效果不显示。
                               var index=$(this).index(); //var一个索引变量
                               $("ul li:eq("+index+")").css("display","block").siblings().css("display","none") //ul里面的li加一个索引值，并且加一个css样式，鼠标放上显示相应的图片。
                           })
                   })
           })
    </script>
</head>

<body>
   <div id="main">
       <ul>
          <li><a href="#"><img src="img/01.jpg" alt="" /></a></li>
          <li><a href="#"><img src="img/02.jpg" alt="" /></a></li>
          <li><a href="#"><img src="img/03.jpg" alt="" /></a></li>
          <li><a href="#"><img src="img/04.jpg" alt="" /></a></li>
          <li><a href="#"><img src="img/05.jpg" alt="" /></a></li>
       </ul>
        <ol>
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ol>
    </div>
</body>
</html>

css

@charset "utf-8";
/* CSS Document */

body,ul,li,img,ol{padding:0;margin:0;}
body{font-size:12px;}
ul,li{list-style:none;}
img{border:none;}
#main{width:800px;height:280px;margin:0 auto;overflow:hidden;position:relative;}(父元素要相对定位)
#main ul{overflow:hidden;height:280px;width:800px;}（ul设定宽高并让其溢出隐藏）
ol{position:absolute;bottom:10px;right:10px;}（ol用绝对定位，按钮的位置）
ol li{float:left;width:40px;height:20px;background:#FFF;border:1px solid #ccc;line-height:20px;text-align:center;margin-right:5px;overflow:hidden;cursor:pointer;}（按钮的设置）
ol li.active{background:#F93;color:#FFF;font-weight:bold;}（给每个li加一个类，改变鼠标放上的背景效果）