<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
.box{width: 500px;height:auto;overflow:hidden;margin:auto;}
.box>#tabs{width: 500px;margin:auto;height:30px;overflow:hidden;background:#8db962;transition:all 1s;}
.box>#tabs>ul>li{width: 40px;margin:auto;height:30px;overflow:hidden;float: left;margin-left:10px;text-align: center;line-height: 30px;background:#b5baa6;}
.box>#tabs>ul .active{background:red;cursor: pointer;}
.box>#content{width: 99999px;margin:auto;height:436px;overflow:hidden; }
.box>ul>li{width: 559px;margin:auto;height:436px;overflow:hidden; float: left;}
</style>
</head>
<body>
<div class="box">
<div id="tabs">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<ul id="content">
<li><img src="img/bg1.jpg" alt="" width="559px" height="436px"></li>
<li><img src="img/bg2.jpg" alt="" width="559px" height="436px"></li>
<li><img src="img/bg3.jpg" alt="" width="559px" height="436px"></li>
<li><img src="img/bg4.jpg" alt="" width="559px" height="436px"></li>
<li><img src="img/bg5.jpg" alt="" width="559px" height="436px"></li>
<li><img src="img/bg6.jpg" alt="" width="559px" height="436px"></li>
<li><img src="img/bg7.jpg" alt="" width="559px" height="436px" align="center"></li>
</ul>
</div>
<script src="js/jquery1.8.3.js"></script>
<script>
$(function(){
$("#tabs ul li").mouseover(function() {
$(this).addClass('active').siblings('').removeClass('active');
index=$(this).index();
i=index;
$("#content li ").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
});
})
</script>
</body>
</html>
253
12-30
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
