手动图片轮播 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
*{ margin:0px auto; padding:0px;}
#lunbo{background-image:url(1.jpg); background-size:cover; width:1000px; height:300px; top:100px; position:relative; }

.jiantou{background-position:center;  width:30px; height:60px;}

#p1{background-image:url(prev.gif); float:left; margin:100px 0px 0px 0px;}

#p2{background-image:url(next.gif); float:right; margin:100px 0px 0px 0px;}
</style>

<body>
<div id="lunbo" >
<div class="jiantou" id="p1" onclick="dodo(-1)"></div>
<div class="jiantou" id="p2" onclick="dodo(1)"></div>
</div>
</body>
</html>
<script language="javascript">
var jpg=new Array();
jpg[0]="url(1.jpg)";
jpg[1]="url(2.jpg)";
jpg[2]="url(3.jpg)";
jpg[3]="url(4.jpg)";
var a=document.getElementById("lunbo")
var xb=0;
function dodo(m)
{
    xb=xb+m;

    
if(xb<0)
{
    xb=jpg.length-1;
}

else if(xb>=jpg.length)
{
    xb=0;
}
a.style.backgroundImage=jpg[xb];

}
</script>

 

posted @ 2016-05-03 14:58  明天会更好！！！！  阅读(138)  评论(0)    收藏  举报