jQuery实现一个简单的轮播图
html代码：
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <title>轮播图练习</title> <linkrel="stylesheet"href="css/css.css"rel="externalnofollow"type="text/css"/> </head> <body> <ulclass="back"><!--背景图片--> <liclass="l1"></li> <liclass="l2"></li> <liclass="l3"></li> <liclass="l4"></li> <liclass="l5"></li> </ul> <ulclass="point"><!--控制按钮--> <liclass="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> <divclass="btn"><!--左右控制按钮--> <spanclass="prev"></span> <spanclass="next"></span> </div> </body> <scriptsrc="js/jquery-1.7.2.js"></script> <scriptsrc="js/jq.js"></script> </html>
css代码：
*{margin:0;padding:0;}
ulli{list-style:none;}
.back{height:400px;overflow:hidden;margin-top:100px;}
.backli{width:100%;height:400px;margin:0auto;}
.backli.l1{background:red;}
.backli.l2{background:yellow;}
.backli.l3{background:blue;}
.backli.l4{background:black;}
.backli.l5{background:green;}
.point{text-align:center;margin-top:-30px;}
.pointli{width:20px;height:20px;border:2pxsolid#fff;border-radius:10px;box-sizing:border-box;display:inline-block;}
.pointli.active{background:#fff;}
.btn{position:relative;}
.btnspan{display:inline-block;vertical-align:top;width:100px;height:100px;background:rgba(0,0,0,.5);position:absolute;top:-235px;cursor:pointer;}
.btn.prev{left:0}
.btn.next{right:0;}
js代码：
$(function(){
functionbanner(a,b,c,d,e){//a是背景图，b是active，c是背景对应按钮，d是上一页，e是下一页
index=0;
len=$(a).length-1;
functionteb(index){
$(c).eq(index).addClass(b).siblings('').removeClass(b);
$(a).eq(index).fadeIn(300).addClass('curr').siblings('').fadeOut(300).removeClass('curr');
};
$(c).click(function(){
index=$(this).index();
teb(index);
});
$(d).click(function(){
index--;
if(index<0){
index=len;
};
teb(index);
});
$(e).click(function(){
index++;
if(index>len){
index=0;
};
teb(index);
});
functiontimeRun(){
time=setInterval(function(){
index++;
if(index>len){
index=0;
};
teb(index);
},3000);
};
timeRun();
};
banner('.back>li','active','.point>li','.prev','.next');
});
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！