jq 轮播图

来源：互联网发布：vb中loop是什么意思编辑：程序博客网时间：2024/06/16 22:29

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-2.1.1.js"></script> <style> #box{ width:280px; height: 200px; overflow: hidden; margin: 0 auto; position: relative; } #box #imgs{ height: 200px; width: 1120px; position: absolute; left: 0; top:0; } img{ height: 200px; width: 280px; float: left; } #left{ position: absolute; top: 90px; left:0; width: 20px; height: 20px; } #right{ position: absolute; top: 90px; left:260px; width: 20px; height: 20px; } </style> </head> <body> <div id="box"> <div id="imgs"> <img src="img/mn1.jpg"/> <img src="img/mn2.jpg"/> <img src="img/mn3.jpg"/> <img calss = 'btn' src="img/mn4.jpg"/> <img calss = 'btn' src="img/mn1.jpg"/> </div> <img src="img/l.png"id = 'left'/> <img src="img/r.png"id = 'right'/> </div> </body> <script type="text/javascript"> var timer; var i = 0 function gun(){ timer = setInterval(fun,500); function fun(){ i++; console.log(i); if(i == 5){ i = 1; $('#imgs').css('left', 0) } $('#imgs').animate({ 'left' : -280*i },200,'linear'); } } gun(); $('.btn').on('click',function(){ clearInterval(timer); if(i==0){ i = 4; }if($(this).index() == 0) $('#imgs').animate( {left :i *(-280)},function () { gun(); } ) }); </script> </html>

0 0