1、自动轮播
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播--无限轮播</title>
<style>
#tuijian{
border:1px #000000 solid;
width:640px;
height:500px;
background-repeat:no-repeat;
left:300px;
top: 200px;
position: absolute;
background-image:url(x.jpg);
background-position: center;
background-size: contain;
}
</style>
</head>
<body>
<div id="tuijian"></div>
</body>
<script>
var jpg =new Array();
jpg[0]="url(c.jpg)";
jpg[1]="url(d.jpg)";
jpg[2]="url(x.jpg)";
jpg[3]="url(z.jpg)";
var tjimg = document.getElementById("tuijian");
var xb=0;
function huan()
{xb++;
if(xb == jpg.length)
{
xb=0;
}
tjimg.style.backgroundImage=jpg[xb];
window.setTimeout("huan()",2000); //实现无限循环图片，即轮播效果
}
window.setTimeout("huan()",2000);//调用函数/方法
</script>
计算机按顺序依次读取程序代码，执行代码;
编写程序代码有两种思维方式，顺向/逆向。
2、自动、手动切换轮播
body代码:
<div id="tuijian">
<div class="pages" id="p1" onclick="dodo(-1)"></div>
<div class="pages" id="p2" onclick="dodo(1)"></div>
</div>
<script>
var jpg =new Array();
jpg[0]="url(qh/a.jpg)"
jpg[1]="url(qh/sy.jpg)";
jpg[2]="url(qh/x.jpg)";
jpg[3]="url(qh/x.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)
{
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>
css代码：
#tuijian{
width: 760px;
height: 400px;
left:300px;
top: 200px;
position: absolute;
background-image:url(qh/0da5b6fd5266d016232cd2b3902bd40734fa35f5.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#p1{float:left;
margin:170px 0px 0px 10px;
position:absolute;
background-image:url(qh/%E5%B7%A6.png);
background-position:center;}
#p2{
background-image:url(qh/%E5%8F%B3.png);
margin-top: 170px;
position: absolute;
float: right;
right:10px;
}
我认为，努力，就够了！！！
时间： 2024-10-09 19:35:40