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

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

以上是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= $(“ . b a n n e r . p i c i m g ”); / / 图片对象 v a r$ btn= $(“ . b a n n e r . b t n l i ”); v a r$ tab= $(“ . b a n n e r . t a b l i ”); v a r l e n =$ pic.length;
$p i c . e q (0) . a d d C l a s s (“ s h o w ”);$ tab.eq(0).addClass(“active”);
var n_index=0;
$t a b . c l i c k (f u n c t i o n () / / c o n s o l e . l o g ($ (t h i s) . i n d e x ()); v a r n u m = $ (t h i s) . i n d e x (); i f (n u m! = n_{i} n d e x) c h a n g e (n u m););$ btn.click(function () {
var num=n_index;
console.log( $(t h i s) . i n d e x ()); i f ($ (this).index()){//1
num++;
console.log(num);
num%=len;//取余
}else {//0
num–;
console.log(num);
num%=len;
}
change(num);
});
function change(num) {
$p i c . e q (n_{i} n d e x) . f a d e O u t (2000);$ tab.eq(n_index).removeClass(“active”);
n_index=num;
$p i c . e q (n u m) . f a d e I n (2000);$ tab.eq(num).addClass(“active”);
}
setInterval(f,3000);
function f() {
var num=n_index;
num++;
num%=len;
change(num)
}
});
jq的代码。

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

相关推荐