操作样式 ，海贼王
<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>
