玩法就是，点击右边的摇杆，上面的水果图片就会一直不停的滚动，再点击右边的摇杆，就会停止滚动，此时就会判断三个图片是否一样，一样的话就会提示你赢了，否则提示继续加油！
首先利用html和css进行布局：
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#title{
margin: 0 auto;
width: 446px;
height: 110px;
background-image: url(./images/title.png);
}
#content {
width:1024px;
height:500px;
background:url('./images/jiqi.png') no-repeat;
background-position:70% 50%;
position:relative;
}
#content #scroll1,#content #scroll2,#content #scroll3{
width: 58px;
height: 90px;
position: absolute;
}
#content #scroll1{
left:560px;
top:212px;
overflow:hidden;
}
#content #scroll2{
left:626px;
top:212px;
overflow:hidden;
}
#content #scroll3{
left:692px;
top:212px;
overflow:hidden;
}
ul{
list-style:none;
}
ul img{
width:58px;
height:90px;
}
#content #yaogan{
width: 107px;
height: 243px;
left: 770px;
top:180px;
position: absolute;
}
#content #yaogan button{
width: 50px;
height: 120px;
background:url('./images/yaogan1.png') no-repeat;
border:none;
background-size:100% 100%;
}
</style>
<body>
<div id = "title">
</div>
<div id = "content">
<div id = "scroll1">
<ul id = "scroll1_ul">
<li><img src="./images/p01.jpg"></li>
<li><img src="./images/p02.jpg"></li>
<li><img src="./images/p03.jpg"></li>
<li><img src="./images/p04.jpg"></li>
<li><img src="./images/p05.jpg"></li>
<li><img src="./images/p06.jpg"></li>
<li><img src="./images/p07.jpg">
最低0.47元/天 解锁文章
7745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
