图片滚动

源代码：

 

<!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>
<link href="图片滚动.css" rel="stylesheet" type="text/css" />
</head>

<body>
<center><div id="yuan" style="background-image:url(5b7677ff34d10d532e2e2120%5B1%5D.jpg);">
<div class="anniu" id="a1" onclick="dodo(-1)"><img src="左.png"/></div>
<div class="anniu" id="a2" onclick="dodo(1)"><img src="右.png"/></div>
</div></center>
</body>
</html>
<script>
var tp=new Array();
tp[0]="url(5b7677ff34d10d532e2e2120%5B1%5D.jpg)";
tp[1]="url(7d570b1bd10d24b2e8248820%5B1%5D.jpg)";
tp[2]="url(7fddd405dfd30680267fb511%5B1%5D.jpg)";
var ht=document.getElementById("yuan");
var a=0; var b=0;
function h()
{
    a++;
    if(a==tp.length)
    {
        a=0;
    }
    ht.style.backgroundImage=tp[a];
    if(b==0)
    {
        var id=window.setTimeout("h()",2000);
    }
}
function dodo(m)
{
    a=1;
    a=a+m;
    if(a<0)
    {
        a=tp.length-1;
    }
    else if(a>=tp.length)
    {
        a=0;
    }
    ht.style.backgroundImage=tp[a];
}
window.setTimeout("h()",2000);
</script>

 

css 样式表：

 

@charset "utf-8";
/* CSS Document */
<style type="text/css">
*
{
    margin:0px auto;
    padding:0px;
}
#yuan
{
    
    width:800px;
    height:550px;
    background-repeat:no-repeat;
    
}
.anniu
{
    
    background-color:#000;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0.6;
    width:50px;
    height:80px;
}
#a1
{
    
    float:left;
    margin:280px 0px 0px 10px;
}
#a2
{
    
    float:right;
    margin:280px 20px 0px 0px;
}
</style>

 

 

 

posted @ 2016-05-26 00:30  小飛  阅读(176)  评论(0)  编辑  收藏  举报