<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易的轮播</title>
<style>
*{
margin:0px;
padding:0px;}
#box{
width:100%;
height:280px;
position:relative;
overflow:hidden; /*若不加这句隐藏，几张图片将纵向叠加*/
}
#box ol{
position:absolute;
bottom:10px;
left:47%
}
ul,ol{
list-style:none;}
#box ol li{
border-radius:7px; /* css新特性（圆角）这样活生生将ol方形切成了圆形，px超过方形0.5边长就是一个圆了*/
width:10px;
height:10px;
float:left;
background-color:#666;
margin:5px;
opacity: 0.4; /*这里透明度设置会好看一丢丢*/
border:#666 1PX solid;
line-height:20px;
text-align:center;
cursor:pointer; /*手型*/
}
#box ol li.current{
background-color:#09F;
}
img{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_2.jpg"></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_3.jpg"></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_6.jpg"></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_5.jpg"></li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
<script type="text/javascript" src="https://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#box ol li").mouseover(function(event){
var index=$(this).index();//获取当前索引值
$("#box ul li").eq(index).fadeIn().siblings().hide();//当前的eq个图淡入fadein，其他图隐藏
$(this).addClass('current').siblings().removeClass('current');
//鼠标放在哪个点上，哪个点实现current的css特性，此时其他点移除这个特性
})
});
</script>
浙公网安备 33010602011771号