var speed=10;
var distance=10;
var demoWidth=470;
var nowpic=1;
var direction="next";
var isMove=false;
var autoTime=5000;

var demo=document.getElementById("demo");
var prebtn=document.getElementById("prebtn");
var nextbtn=document.getElementById("nextbtn");

prebtn.onmouseover=function(){this.style.cursor='pointer';}
nextbtn.onmouseover=function(){this.style.cursor='pointer';}

prebtn.onclick=function(){
	if(!isMove){
		if(nowpic!=1){
			clearInterval(auto);
			direction="pre";
			movePre();
		}
	}
}

nextbtn.onclick=function(){
	if(!isMove){
		if(nowpic!=3){
			clearInterval(auto);
			direction="next";
			moveNext();
		}
	}
}

function moveNext(){
	function Marquee(){
		if(nowpic==3 || direction=="pre"){
			clearInterval(MyMar);
			isMove=false;
			direction="pre";
			movePre();	
		} 
		else{	
			if(demo.scrollLeft<demoWidth*nowpic){
				isMove=true;
				demo.scrollLeft+=distance
			}
			else{
			clearInterval(MyMar);
			clearInterval(auto);
			auto=setInterval(moveNext,autoTime);
			isMove=false;
			document.getElementById("dian_"+nowpic).className="pic_out";
			nowpic++;
			document.getElementById("dian_"+nowpic).className="pic_over";
			}
		}
	}
	var MyMar=setInterval(Marquee,speed)
}

function movePre(){
	function Marquee(){ 
		if(nowpic==1 || direction=="next"){
			clearInterval(MyMar);
			isMove=false;
			direction="next";
			moveNext();
		} 
		else {
			if(demo.scrollLeft>demoWidth*(nowpic-2)){ 
					isMove=true;
					demo.scrollLeft-=distance; 
				}
				else {
				clearInterval(MyMar);
				clearInterval(auto);
				auto=setInterval(moveNext,autoTime);
				isMove=false;
				document.getElementById("dian_"+nowpic).className="pic_out";
				nowpic--;
				document.getElementById("dian_"+nowpic).className="pic_over";
				}
			}
	}
	var MyMar=setInterval(Marquee,speed)
}
var auto=setInterval(moveNext,autoTime)