HTML 自动、手动切换轮播 from：金水

、自动、手动切换轮播

body代码:

<div id="tuijian"> 
<div class="pages" id="p1" οnclick="dodo(-1)"></div>            
<div class="pages" id="p2" οnclick="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;
    }

 我认为，努力，就够了！！！

转载于:https://www.cnblogs.com/yongjiapei/p/5506544.html