jquery那点事之写轮播图

来源：互联网发布：网络电视蚂蚁编辑：程序博客网时间：2024/06/06 16:27
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">#outer{ margin:50px auto; position:relative; width:400px; height:210px; overflow:hidden;  }#inner{ width:2000px; position:absolute; top:0; left:0; height:210px; }#inner div{ width:400px; height:210px; float:left; background:darkBlue; text-align:center; line-height:210px; font-size:38px; font-weight:bold; color:#fff;}#outer ul{ width:160px; list-style:none; height:20px; line-height:20px; position:absolute; right:30px; bottom:20px;}#outer ul li{ float:left; margin:0 5px; width:20px; height:20px; background:orange; font-size:16px; font-weight:bold; text-align:center; cursor:pointer; }</style></head><body><div id="outer"><div id="inner">    <div >一一一一一红红</div>        <div style="background:green;" >二二二二红红</div>        <div style="background:black" >三三三三三红红</div>        <div style="background:red"  >四四四四四红红</div>        <div  style="background:purple" >五五五五五红红</div>       </div>    <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></body></html><script src="jquery-1.7.1.js"></script><script>$("#outer>ul>li").click(function(){var index=$(this).index();$("#inner").stop().animate({left:index*-400},1500);})</script>
0 0