﻿
/*
**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)
**
**实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器partner，里面放partner1和partner2，partner1是滚动内容,partner2为partner1的直接克隆，
**通过不断改变partner1的scrollTop或者scrollLeft达到滚动的目的，当滚动至partner1与partner2的交界处时直接跳回初始位置，
**因为partner1与partner2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。 
*/ 
var speed1=0	//图片左移的速度
var MyMar1	//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
var MyMar2	//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
var lefthit=0		//记录左移按钮点击次数
var righthit=0	////记录右移按钮点击次数  
//调用右移方法前,先让左移停止（clearInterval清除setInterval对方法的调用）
function clearleft(){
clearInterval(MyMar1)
clearInterval(MyMar2)
} 
//图片左移的方法
function toleft(){
  //判断是否是第一次按下左移按钮（图片往左开始移动的时候，不会在调用此方法。只有当按了右移按钮时，才会把lefthit重设为0）
  if(lefthit==0){
	  speed1=30;//图片左移速度时间毫秒
	  //让的内容partner2与partner1内容一样
	  document.getElementById("partner2").innerHTML=document.getElementById("partner1").innerHTML
	  //上行图片移动的方法
	  function Marquee1(){
	  	  //当partner滚动至partner2的交界处。与就是与partner2重合时。offsetWidth与scrollLeft刚好相等
		  if(document.getElementById("partner2").offsetWidth-document.getElementById("partner").scrollLeft<=0){
		  	//partner跳回初始位置
		  	document.getElementById("partner").scrollLeft-=document.getElementById("partner1").offsetWidth
		  }
		  else{
		  	//partner开始重新移动
		  	document.getElementById("partner").scrollLeft++
		  }
	  }
	  //setInterval让Marquee1方法每隔多少秒执行一次，并把返回的调用次数ID
	  MyMar1=setInterval(Marquee1,speed1)
	  //当鼠标移动partner上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止
	  document.getElementById("partner").onmouseover=function() 
	  {clearInterval(MyMar1);clearInterval(MyMar2)}
	  //当鼠标移除partner时,重新setInterval让方法执行，这样图片会继续移动
	  document.getElementById("partner").onmouseout=function() 
	  {MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);}

	  lefthit=1		//设置左移按钮，当按了一次左移后(不管按多少次)，在没按右移按钮之前，toleft方法里的的代码不会再被执行
	  righthit=0	//把右移按钮设为0,这样当下次点了右移按钮的时候，以便toright方法被调用
  }
}


var MyMar3	//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
var MyMar4	//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
var speed2=0	//图片右移的速度
//调用移左方法前,先让右移停止（clearInterval清除setInterval对方法的调用）
function clearright(){
clearInterval(MyMar3)
clearInterval(MyMar4)
}


//图片右移方法(与图片左移方法思路一样)
function toright(){
  //判断是否是第一次按下右移按钮（图片往右开始移动的时候，不会在调用此方法。只有当按了左移按钮时，才会把righthit重设为0）
  if(righthit==0){
	  speed2=30;
	  document.getElementById("partner2").innerHTML=document.getElementById("partner1").innerHTML
	  function Marquee_a(){
		  if(document.getElementById("partner").scrollLeft<=0){
		  	document.getElementById("partner").scrollLeft=document.getElementById("partner2").offsetWidth
		  }
		  else{
		 	 document.getElementById("partner").scrollLeft--
		  }
	  }
	  MyMar3=setInterval(Marquee_a,speed2)
	  document.getElementById("partner").onmouseover=function() 
	  {clearInterval(MyMar3);}
	  document.getElementById("partner").onmouseout=function() 
	  {MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);}

	  righthit=1	//设置右移按钮，当按了一次右移按钮后(不管按多少次)，在没按左移按钮之前，toright方法里的的代码不会再被执行
	  lefthit=0	//把左移按钮设为0,这样当下次点了左移按钮的时候，以便toleft方法被调用
  }
}