码迷,mamicode.com
首页 > 其他好文 > 详细

操作样式 ,海贼王

时间:2016-07-14 10:14:23      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

<title>海贼王</title>
</head><style type="text/css">
*{

margin:0px auto;
padding:0px;
font-family:"微软雅黑"}
#tuijian
{ width:1346px;
height:585px;
background-repeat:no-repeat;
}
.pages
{
top:200px;
background-color:#000;
background-position:center;
background-repeat:no-repeat;
opacity:0.4;
width:30px;
height:60px;
}
#p1
{
background-image:url(33.jpg) ;
float:left;
margin:300px 0px 0px 100px;
}
#p2
{
background-image:url(22.jpg);
float:right;
margin:300px 100px 0px 0px;
}

</style>

<body>
<div id="tuijian" style="background-image:url(4j.jpg)">
<div class="pages" id="p1" onclick="dodo(-1)"></div>
<div class="pages" id="p2" onclick="dodo(1)"></div></div>
</body>
</html>
<script language="javascript">
var jpg=new Array();
jpg[0]="url(1j.jpg)";
jpg[1]="url(2j.jpg)";
jpg[2]="url(5j.jpg)";
var tjimg= document.getElementById("tuijian");
var xb=0;
var n=0;
function huan()
{
xb++;
if(xb==jpg.length)
{
xb=0;
}
tjimg.style.backgroundImage=jpg[xb];
if(n==0)
{
var id=window.setTimeout("huan()",3000);
}
}
function dodo(m)
{
n=1;
xb=xb+m;
if(xb<0)
{
xb=jpg.length-1;
}
else if(xb>=jpg.length)
{
xb=0;
}
tjimg.style.backgroundImage=jpg[xb];
}
window.setTimeout("huan()",300);

</script>技术分享

操作样式 ,海贼王

标签:

原文地址:http://www.cnblogs.com/zl1121102942/p/5669266.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!