作为新手，自己编写的一个轮播图，希望可以帮助到一些人

作为新手，自己编写的一个轮播图，希望可以帮助到一些人

以上是HTML代码很简单，应该可以一眼看懂
*{
margin: 0;
padding: 0;
}
ul{
list-style:none ;
}
/* banner star*/
.banner{
height: 200px;
width: 800px;
/background: blue;/
margin: 50px auto;
position: relative;
}
.banner .pic img{
height: 200px;
width: 800px;
position: absolute;
display: none;
}
.banner .pic img.show{
display: block;
}
.banner .btn{
font-size: 50px;
height: 200px;
line-height: 200px;
color: white;
font-family: 黑体;
font-weight:bold ;
display: none;
}
.banner:hover .btn{
display: block;
}
.banner .btn .left{
position: absolute;
left: 15px;
}
.banner .btn .right{
position: absolute;
right: 15px;
}
.banner .tab{
/*border: 1px solid red;
height: 17px;
width: 118px;*/
position: absolute;
bottom: 15px;
left: 50%;
margin-left:-59px ;
}
.banner .tab li{
height: 15px;
width: 15px;
border: 1px solid white;
border-radius:50% ;
float: left;
margin-left: 10px;
}
.banner .tab li:hover{
background: white;
}
.banner .tab .active{
background: white;
}
这是css的代码，比较繁琐
$(function () { //获取操作对象 var$pic=$(“.banner .pic img”);//图片对象 var$btn=$(“.banner .btn li”); var$tab=$(“.banner .tab li”); var len=$pic.length;
$pic.eq(0).addClass(“show”);$tab.eq(0).addClass(“active”);
var n_index=0;
$tab.click(function () { //console.log($(this).index()); var num=$(this).index(); if(num!=n_index){ change(num); } });$btn.click(function () {
var num=n_index;
console.log($(this).index()); if($(this).index()){//1
num++;
console.log(num);
num%=len;//取余
}else {//0
num–;
console.log(num);
num%=len;
}
change(num);
});
function change(num) {
$pic.eq(n_index).fadeOut(2000);$tab.eq(n_index).removeClass(“active”);
n_index=num;
$pic.eq(num).fadeIn(2000);$tab.eq(num).addClass(“active”);
}
setInterval(f,3000);
function f() {
var num=n_index;
num++;
num%=len;
change(num)
}
});
jq的代码。