js控制marquee无空白滚动


<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" οnclick="aa.stop()">
<input type="button" value="left" οnclick="aa.left()">
<input type="button" value="right" οnclick="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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值