zoukankan      html  css  js  c++  java
  • HTML 自动、手动切换轮播 from:金水

    、自动、手动切换轮播

    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{
         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;
        }
    复制代码

     我认为,努力,就够了!!!

  • 相关阅读:
    markdown 书写文档的框架
    使用snap
    如何让pandas表格直接转换为markdown表格
    我们需要怎样去写博客
    jupyter notebook 远程访问
    安装tensorflowGPU版本
    Data Science Project
    使用python处理地理数据:Geopandas
    python移植环境
    Jupyter notbook& REVEAL.JS& nbconvert 使用jupyter notebook制作slides
  • 原文地址:https://www.cnblogs.com/yongjiapei/p/5506544.html
Copyright © 2011-2022 走看看