HTML——图片自动轮换和手动轮换

最新推荐文章于 2024-06-06 20:04:13 发布

weixin_34235371

最新推荐文章于 2024-06-06 20:04:13 发布

阅读量1.8k

点赞数 3

文章标签： xhtml javascript ViewUI

<!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>JavaScript</title>
<style type="text/css">
*{    
margin:0px auto;    
padding:0px;    
font-family:"微软雅黑";}

#tuijian{    
width:760px;    
height:350px;    
background-repeat:no-repeat;
background-size:cover;}

.pages{    
top:200px;    
background-color:#000;    
background-position:center;    
background-repeat:no-repeat;    
opacity: 0.4;    
width: 30px;    
height:60px;    }

#p1{    
background-image:url(11.jpg);    
float:left;    
margin:150px 0px 0px 10px;    }

#p2{    
background-image: url(22.jpg);    
float:right;    
margin:150px 10px 0px 0px;}
</style>
</head>

<body>
<div id="tuijian" style=" background-image:url(1.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(1.jpg)";
jpg[1]="url(2.jpg)";
jpg[2]="url(3.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()",3000);
</script>

weixin_34235371

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML——图片自动轮换和手动轮换

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&l
复制链接

扫一扫