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'); });
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!