jQuery 实现广告条效果

来源：互联网发布：软件开发需求阶段编辑：程序博客网时间：2024/04/30 18:22
<!DOCTYPE html PUBLIC><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-app-status-bar-style" content="black" /><meta HTTP-EQUIV="pragma" CONTENT="no-cache" /><meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate" /><meta HTTP-EQUIV="expires" CONTENT="0" /><meta name="format-detection" content="telephone=no" /><meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1,minimal-ui"><style type="text/css">body,div,img{margin:0px;padding:0px;border:0px;vertical-align: middle;}body{max-width:640px;margin: 0px auto;}#big_container{max-width:640px;height:180px;overflow: hidden;position:relative;margin:0px auto;}#container{position: absolute;left:0px;}</style><script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script><script type="text/javascript">var width = ""; $(document).ready(function(){width = $(document.body).width();console.log("width   :    " + width);$("#container > img").width(width + "px");var imgCount = 3;var moveDis = width;var containerWidth = imgCount * width;$("#container").width(containerWidth + "px");var leftMoveCount = 1;var rightMoveCount = 1;var reachEndOfLeft = false;setInterval(function(){var leftValue = $("#container").css("left").replace("px","");if(leftValue > (-containerWidth + moveDis) && !reachEndOfLeft){rightMoveCount = 1;$("#container").animate({left:-moveDis * leftMoveCount + 'px'},300,"linear");leftMoveCount ++;}else if(leftValue < 0){reachEndOfLeft = true;leftMoveCount = 1;$("#container").animate({left:(-width * 2 + moveDis * rightMoveCount) + 'px'},300,"linear");rightMoveCount ++;}else{reachEndOfLeft = false;}}, 3000);});</script><title>Insert title here</title></head><body><div id="big_container"><div id="container"><img id="img1" alt="" src="../img/ad.png"><img id="img2" alt="" src="../img/640X180_2.png"><img id="img3" alt="" src="../img/640X180_6.png"></div></div></body></html>
0 0