图片轮播

Posted 2020-08-19 不会撩妹的白芒果

head里

<style>
*{ margin:50px auto;}
#tuijian{ width:760px;
height:350px;
background-repeat:no-repeat;
background-position:center center;}
.pages{ top:200px;
background-color:black;
opacity:0.5;
width:30px;
height:60px;}
#p1{ float:left;
margin-left:10px;
margin-top:150px;}
#p2{ float:right;
margin-right:10px;
margin-top:150px;}

</style>

body里

<div id="tuijian" style="background-image:url(1.jpg);">
<div class="pages" id="p1" onclick="dod(-1)"></div>
<div class="pages" id="p2" onclick="dod(1)"></div>
</div>

html外

<script>
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)
    {
    window.setTimeout("huan()",3000);    
    }
}
window.setTimeout("huan()",3000);
function dod(m)
{

    xb=xb+m;
    if(xb<0)
    {
    xb=jpg.length-1;    
    }
    else if(xb>=jpg.length)
    {
    xb=0;    
    }
    tjimg.style.backgroundImage=jpg[xb];
}



</script>