京东选项卡案例

登录

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东选项卡案例</title>
</head>

<style>

  *{ padding: 0; margin: 0; list-style: none;}

  .banner{ width: 790px; height: 340px; border: 3px solid green; margin: 100px auto; position: relative;}

  .pic li{ position: absolute; top:0; left: 0; }

  ol{ position: absolute; bottom: 20px; right: 50%; margin-right:-35px; }

  ol li{ width: 14px; height: 14px; background: #000; float: left; margin: 0 5px; border-radius: 50%; }

</style>

<script src="../js/jquery-1.11.3.min.js"></script>

<script>

  $(function(){

$(".pic li").eq(0).show();

$("ol li").eq(0).css("background","red");

$("ol li").mouseover(function(){

$(this).css("background","red").siblings("li").css("background","#000");

var idx=$(this).index();

$(".pic li").eq(idx).fadeIn().siblings("li").fadeOut();

})

  })
</script>

<body>

<div class="banner">

  <ul class="pic">

<li>
<a href="#">
   <img src="../image/7.jpg" alt="">
</a>
</li>

<li>
<a href="#">
   <img src="../image/8.jpg" alt="">
</a>
</li>

<li>
<a href="#">
   <img src="../image/9.jpg" alt="">
</a>
</li>

<li>
<a href="#">
   <img src="../image/10.jpg" alt="">
</a>
</li>

  </ul>

  <ol>

<li></li>
<li></li>
<li></li>
<li></li>

  </ol>


</div>

</body>
</html>

lori棒棒糖 · 发表于 2018-9-12 16:57:55

作业完成没有问题的哦~

[作业] 京东选项卡案例

本帖子中包含更多资源

共1个回复最后回复于 2018-9-12 16:57

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[作业] 京东选项卡案例

本帖子中包含更多资源

共1个回复 最后回复于 2018-9-12 16:57

共1个回复最后回复于 2018-9-12 16:57