论坛
标题:
京东选项卡案例
[打印本页]
作者:
小白的自学生涯
时间:
2018-9-10 21:03
标题:
京东选项卡案例
<!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
作业完成没有问题的哦~
欢迎光临 论坛 (http://bbs.qinxue.com/)
Powered by Discuz! X3.1