DIV中,怎么实现图片的跑马灯效果?
2013-06-28
展开全部
css样式文件名:StyleSheet.css#pic
{
width:600px;
height:400px;
margin-left:auto;
margin-right:auto;
border:solid 1px #cccccc;
}
#pic ul
{
display:block;
list-style:none;
}
#pic li{ display:inline;}代码:<html xmlns=" http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title><link href="StyleSheet.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="pic">
<marquee direction="left" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" >
<ul>
<li><img alt="test" src=" http://pc.images22.51img1.com/6000/linlan19/cc43fb5d453e28bad66d98381f958a29.gif" style="height:400px;" /></li>
<li><img alt="test" src=" http://pe.images22.51img1.com/6000/linlan19/e5aab1c5619bc8f9fc278b8063ed0ef4.jpg" /></li>
<li><img alt="test" src=" http://p8.images22.51img1.com/6000/linlan19/8b54f908549e6f94595c11a13526a496.gif" /></li>
<li><img alt="test" src=" http://pc.images22.51img1.com/6000/linlan19/c550866933dbd059c0eb5c03498fd686.jpg" /></li>
<li><img alt="test" src=" http://pd.images22.51img1.com/6000/linlan19/dff924cd48769a94bf6543e6a9a4fcf9.jpg" /></li>
<li><img alt="test" src=" http://pb.images22.51img1.com/6000/linlan19/b4f7ce7c7629e254826eeca8dd5a441b.jpg" /></li>
</ul>
</marquee>
</div>
</form>
</body>
</html>
{
width:600px;
height:400px;
margin-left:auto;
margin-right:auto;
border:solid 1px #cccccc;
}
#pic ul
{
display:block;
list-style:none;
}
#pic li{ display:inline;}代码:<html xmlns=" http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title><link href="StyleSheet.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="pic">
<marquee direction="left" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" >
<ul>
<li><img alt="test" src=" http://pc.images22.51img1.com/6000/linlan19/cc43fb5d453e28bad66d98381f958a29.gif" style="height:400px;" /></li>
<li><img alt="test" src=" http://pe.images22.51img1.com/6000/linlan19/e5aab1c5619bc8f9fc278b8063ed0ef4.jpg" /></li>
<li><img alt="test" src=" http://p8.images22.51img1.com/6000/linlan19/8b54f908549e6f94595c11a13526a496.gif" /></li>
<li><img alt="test" src=" http://pc.images22.51img1.com/6000/linlan19/c550866933dbd059c0eb5c03498fd686.jpg" /></li>
<li><img alt="test" src=" http://pd.images22.51img1.com/6000/linlan19/dff924cd48769a94bf6543e6a9a4fcf9.jpg" /></li>
<li><img alt="test" src=" http://pb.images22.51img1.com/6000/linlan19/b4f7ce7c7629e254826eeca8dd5a441b.jpg" /></li>
</ul>
</marquee>
</div>
</form>
</body>
</html>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询