banner图片轮转（利用jquery）

来源：互联网发布：java 动态方法编辑：程序博客网时间：2024/05/01 13:45
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" /><link rel="stylesheet" href="http://dundunbook.sinaapp.com/js_css/reset.css"><script src="http://dundunbook.sinaapp.com/js_css/jquery-1.8.3.min.js"></script><script src="http://dundunbook.sinaapp.com/js_css/jquery.query-2.1.7.js"></script><script>window.setInterval(roll, 1000); var cnt = 0;function roll(){if(cnt==0)$(".banner_content").animate({left:"-100%"});else if(cnt==1)$(".banner_content").animate({left:"-200%"});else if(cnt==2)$(".banner_content").animate({left:"-300%"});else if(cnt==3)$(".banner_content").animate({left:"0%"});cnt++;if(cnt>=4)cnt = 0;}</script><style type="text/css">.banner_holder{height:200px;width:100%;overflow:hidden;position:relative;}.banner_content{height:200px;width:400%;position:absolute;}img{float:left;}</style><title>Home Page</title></head><body><div class="banner_holder"><div class="banner_content"><img src="img1.bmp" height="200px" width="25%" id="banner_img1" /><img src="img2.bmp" height="200px" width="25%" id="banner_img2" /><img src="img3.bmp" height="200px" width="25%" id="banner_img3" /><img src="img4.bmp" height="200px" width="25%" id="banner_img4" /></div></div></body></html>
0 0