您的位置：首页 > Web前端 > JavaScript

JAVASCRIPT——图片滑动效果

2015-08-16 16:33 791 查看
点击按钮开始整体右移，移动至蓝色区域全部显示出来停止。

<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航