js可左右切换的无缝滚动

tuhuolongan 2011-12-29 08:33:52

自己写了个无缝滚动现在的情况是我点击了向左滚动或者是向右滚动但是在鼠标onmouseout事件之后不能继续以前的滚动状态而是一律向左滚动了
纠结~~~

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>test</title>

</head>

<style>

.div1{

	border:#F00 solid 1px;

	width:750px;

	height:86px;

	padding:2px;

	overflow:hidden;

	overflow:scroll;}

.div2{

	float:left;

	width:800%;

	height:80px;}	

.div3,.div4{

	float:left;

	border:#F00 solid 1px;

	width:750px;

	height:80px;

	padding:2px;

	}

.pic{

	border:#00F solid 1px;

	width:100px;

	height:78px;

	float:left;

	background:#0F0;

	margin-left:5px;

	}		

</style>

<body>

<div class="div1" id="div1"><div class="div2" id="div2"><div class="div3" id="div3" >

<div class="pic" style="background:#00F"></div>

<% for i=1 to 6%>

<div class="pic" id="pic"><%=i%></div>

<%

next

%>

</div>

<div class="div4" id="div4"></div>

</div>

</div>

<center>

<input type="button" value="LEFT" onclick="stopscroll_l()" />

<input type="button" value="RIGHT" onclick="stopscroll_r()" />

</center>

<label>DIV1.scrollLeft:<input type="text" id="svalue" style="margin-top:50px;" /></label><br />

<label>DIV2.offsetWidth:<input type="text" id="ovalue" style="margin-top:50px;" /></label><br />

<label>style值:<input type="text" id="stylevalue" style="margin-top:50px;" /></label>

<script type="text/javascript">

var div1;

div1=document.getElementById("div1");

div3=document.getElementById("div3");

div4=document.getElementById("div4");

pic=document.getElementById("pic");

div4.innerHTML=div3.innerHTML;

var timeout;

function marq_l(){

	if(div3.offsetWidth-div1.scrollLeft<=0)

	{div1.scrollLeft-=div3.offsetWidth;}

	else{

div1.scrollLeft++;

	}

/*setInterval(marq_l,5);*/

}

function marq_r(){

	if(div1.scrollLeft<=0)

    div1.scrollLeft+=div3.offsetWidth

    else{

    div1.scrollLeft--;

	}

}

var svalue=document.getElementById("svalue");

var ovalue=document.getElementById("ovalue");

var stylevalue=document.getElementById("stylevalue");

timeout=setInterval(marq_r,5); //初始状态

var style="l";

function getvalue() {

	svalue.value=div1.scrollLeft;

	ovalue.value=div3.offsetWidth;

	}

function stopscroll_l(){//左移动

	window.clearInterval(timeout)

	timeout=setInterval(marq_l,5);

	style="l";

	}

function stopscroll_r(){//右移动

	window.clearInterval(timeout)

	timeout=setInterval(marq_r,5);

	style="r";

	}

setInterval(getvalue,1);

div1.onmousemove=function(){clearInterval(timeout)};

div1.onmouseout=function(){

	if (style="l"){

	timeout=setInterval(marq_l,5);

	/*stylevalue.value=style;*/}

    else 

	if(style="r"){

		timeout=setInterval(marq_r,5);

	/*stylevalue.value=style;*/

		}

	};

/*pic.onmouseout=*/

function getStyleValue(){

stylevalue.value=style;	

	}

	setInterval(getStyleValue,1);

</script>

</body>

</html>

...全文

260 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

tuhuolongan 2011-12-29

打赏
举报

擦！改成双等于就好了

huangwenquan123 2011-12-29

打赏
举报

已测试

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>图片左右滚动</title>

    <style type="text/css">

        #first{width:820px;height:160px;overflow:hidden;}

        #second{width:250%}

        #second img{float:left;margin-right:3px;width:160px;height:160px;}

        #third{float:left;}

        #four{float:left;}

    </style>

</head>

<body>

<a id="left">向左</a>

<div id="first">

    <div id="second">

        <div id="third">

            <img src="images/10.jpg" />

            <img src="images/11.jpg" />

            <img src="images/5.jpg" />

            <img src="images/6.jpg" />

            <img src="images/7.gif" />

            <img src="images/8.jpg" />

        </div>

        <div id="four"></div>

    </div>

</div>

<a id="right">向右</a>

<script type="text/javascript">

    var first = document.getElementById("first");

    var third = document.getElementById("third");

    var four = document.getElementById("four");

    var timer=null;

    var direction="left";

    four.innerHTML = third.innerHTML;

    function leftScroll(){

        if(four.offsetLeft-first.scrollLeft<=0){

            first.scrollLeft-=four.offsetLeft;

        }

        else

            first.scrollLeft++;

    }

    function rightScroll(){

        if(first.scrollLeft<=0){

            first.scrollLeft=four.offsetLeft;

        }

        else{

            first.scrollLeft--;

        }

    }    

    timer = setInterval(leftScroll,1);

    document.getElementById("left").onclick=function(){

        direction="left";

        clearInterval(timer);

        timer = setInterval(leftScroll,1);

    }

    document.getElementById("right").onclick=function(){

        direction="right"

        clearInterval(timer);

        timer = setInterval(rightScroll,1);

    }

    first.onmouseover = function(){

        clearInterval(timer);

    }

    first.onmouseout = function(){

        if(direction=="left")

            timer = setInterval(leftScroll,1);

        else

            timer = setInterval(rightScroll,1);

    }

</script>

</body>

</html>

tuhuolongan 2011-12-29

打赏
举报

style是l

三石-gary 2011-12-29

打赏
举报

div1.onmouseout=function(){
if (style="l"){
timeout=setInterval(marq_l,5);
/*stylevalue.value=style;*/}
else
if(style="r"){
timeout=setInterval(marq_r,5);
/*stylevalue.value=style;*/
}
};
看一下你鼠标离开之后STYLE是什么值