*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.main{
position: relative;
width: 720px;
height: 340px;
margin: 100px auto 0;
}
.pic{
position: relative;
}
.pic a img{
width: 720px;
height: 340px;
position: absolute;
display: none;
}
.btn{
width: 160px;
height: 20px;
position: absolute;
bottom: 10px;
left: 280px;
background: #6C6666;
border-radius: 10px;
opacity: 0.8;
}
.btn ul li{
float: left;
}
.btn ul li{
margin: 2.5px 2.5px;
width: 15px;
height: 15px;
background: #fff;
text-align: center;
border-radius: 7.5px;
cursor: pointer;
}
.btn .on{
background: #db192a;
}
$(function(){
$("div.btn ul li").hover(function(){
var index = $(this).index();
$(this).addClass("on").siblings().removeClass("on");
$("div.pic img").stop(true).fadeOut();
$("div.pic img").eq(index).stop(true).fadeIn();
},function(){
})
})
自己改一下图片的路径就可以了。
要想改变按钮的样式，自己可以根据需要修改。
我的是鼠标移动上去就改变图片，你也可以自己改成点击事件
