js控制marquee无空白滚动

来源:互联网 发布:淘宝客服排班表 编辑:程序博客网 时间:2024/05/21 07:52


<div id="Parent"
 style="cursor: hand; overflow: hidden; width: 800px; height: 50px">
 <div id="Child_A" style="float: left; white-space: nowrap;">
  <img src="" style="width: 50px; height: 50px;">
  <img src="" style="width: 50px; height: 50px;">
  |
 </div>
</div>
<input type="button" value="stop" onclick="aa.stop()">
<input type="button" value="left" onclick="aa.left()">
<input type="button" value="right" onclick="aa.right()">

//js控制图片移动(marquee无空白左右移动)

<script type="text/javascript">
function Marque() {//js封装类
 Marque.prototype.Parent = document.getElementById("Parent");
 Marque.prototype.ChildA = document.getElementById("Child_A");
 Marque.prototype.parentWidth = Marque.prototype.Parent.offsetWidth;
 Marque.prototype.count = 2;
 Marque.prototype.ChildA.innerHTML = Marque.prototype.ChildA.innerHTML + " " + Marque.prototype.ChildA.innerHTML;
 while (Marque.prototype.Parent.scrollWidth <= Marque.prototype.parentWidth) {
  Marque.prototype.count *= 2;
  Marque.prototype.ChildA.innerHTML = Marque.prototype.ChildA.innerHTML + " " + Marque.prototype.ChildA.innerHTML;
 }
 Marque.prototype.speed = 10;
 Marque.prototype.flag = "stop";
 Marque.prototype.Marqueeleft = function () {
  if (Marque.prototype.ChildA.offsetWidth / Marque.prototype.count - Marque.prototype.Parent.scrollLeft <= 0) {
   Marque.prototype.Parent.scrollLeft -= Marque.prototype.ChildA.offsetWidth / Marque.prototype.count;
  } else {
   Marque.prototype.Parent.scrollLeft++;
  }
 };
 Marque.prototype.Marqueeright = function () {
  if (Marque.prototype.Parent.scrollLeft <= 0) {
   Marque.prototype.Parent.scrollLeft = Marque.prototype.Parent.scrollLeft + Marque.prototype.ChildA.offsetWidth / Marque.prototype.count;
  } else {
   Marque.prototype.Parent.scrollLeft--;
  }
 };
 Marque.prototype.Myleft = "";
 Marque.prototype.Myright = "";
 Marque.prototype.stop = function () {
  if (Marque.prototype.flag == "stop") {
   return true;
  }
  if (Marque.prototype.flag == "right") {
   clearInterval(Marque.prototype.Myright);
   Marque.prototype.flag = "stop";
   return true;
  }
  if (Marque.prototype.flag == "left") {
   clearInterval(Marque.prototype.Myleft);
   Marque.prototype.flag = "stop";
   return true;
  }
 };
 Marque.prototype.left = function () {
  if (Marque.prototype.flag == "stop") {
   Marque.prototype.Myleft = setInterval(Marque.prototype.Marqueeleft, Marque.prototype.speed);
   Marque.prototype.flag = "left";
   return true;
  }
  if (Marque.prototype.flag == "right") {
   clearInterval(Marque.prototype.Myright);
   Marque.prototype.Myleft = setInterval(Marque.prototype.Marqueeleft, Marque.prototype.speed);
   Marque.prototype.flag = "left";
   return true;
  }
  if (Marque.prototype.flag == "left") {
   return true;
  }
 };
 Marque.prototype.right = function () {
  if (Marque.prototype.flag == "stop") {
   Marque.prototype.Myright = setInterval(Marque.prototype.Marqueeright, Marque.prototype.speed);
   Marque.prototype.flag = "right";
   return true;
  }
  if (Marque.prototype.flag == "right") {
   return true;
  }
  if (Marque.prototype.flag == "left") {
   clearInterval(Marque.prototype.Myleft);
   Marque.prototype.Myright = setInterval(Marque.prototype.Marqueeright, Marque.prototype.speed);
   Marque.prototype.flag = "right";
   return true;
  }
 };
}

var aa=new Marque();
var aa=new Marque(); 

   </script>