JAVASCRIPT——图片滑动效果

点击按钮开始整体右移，移动至蓝色区域全部显示出来停止。

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*
{
    margin:0px;
    padding:0px;
}
#wai
{
    width:0px;
    height:600px;
}
</style>
</head>
<body>
<input id="anniu1" type="image" value="开始" src="12Nc43961Z-15Y04.png" style=" width:40px; height:40px;position:absolute;left:190px; top:300px; margin-left:0px; display:block" onclick="right()" />--按钮1
<input id="anniu2" type="image" value="开始" src="Kuaiwan.ico" style=" width:40px; height:40px;position:absolute;right:190px; top:300px; margin-right:0px; display:none" onclick="left()" />--按钮2
<div style="width:100%; height:600px; overflow:hidden">--限制图片大小，超出部分隐藏
    <div style="width:3200px; height:600px;">
        <div id="d1" style="width:1349px; height:600px; background-color:#309; float:left; margin-left:-1149px;">--蓝色图片
        </div>
        <div id="d2" style="width:1349px; height:600px; background-color:#F03; float:left;">--红色图片
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

function right()//向右滑动
{    
    if(parseInt(d1.style.marginLeft)<=-200)//蓝色图片左边距小于-200，始终给红色留下200px显示
    {
        var a=parseInt(d1.style.marginLeft)+5;
        d1.style.marginLeft=a+"px";
        var aa=parseInt(anniu1.style.marginLeft)+5;    
        anniu1.style.marginLeft=aa+"px";
        window.setTimeout("right()",3);//每隔3毫秒蓝色图片和按钮1的边距各加5像素
    }    
    else//if(parseInt(anniu1.style.marginLeft)>=949)
    {   
    
        anniu1.style.display="none";//图片和按钮1到头隐藏，显示按钮2，按钮1边距归零
        anniu2.style.marginRight="0px";
        anniu2.style.display="block";
    }
}

function left()//向左滑动
{
    if(parseInt(d1.style.marginLeft)>-1149)//图片和按钮2向左每隔3毫秒增加5px滑动，到左边距为-1149px时停止滑动
    {
        var b=parseInt(d1.style.marginLeft)-5;
        d1.style.marginLeft=b+"px";
        var bb=parseInt(anniu2.style.marginRight)+5;
        anniu2.style.marginRight=bb+"px";
        window.setTimeout("left()",3);    
    }
    else//if(parseInt(d1.style.marginLeft)<=-1149)滑动到头时，按钮1显示，按钮2隐藏，按钮2左边距归零
    {   
        //alert("2");
        anniu2.style.display="none";
        anniu1.style.marginLeft="0px";    
        anniu1.style.display="block";                
    }
}

</script>
</html>

 

posted @ 2015-08-16 16:33  陌钰陌城  Views(209)  Comments(0)  Edit  收藏  举报