• 图片轮播


    head里

    复制代码
    <style>
    *{ margin:50px auto;}
    #tuijian{ 760px;
    height:350px;
    background-repeat:no-repeat;
    background-position:center center;}
    .pages{ top:200px;
    background-color:black;
    opacity:0.5;
    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>
    复制代码
  • 相关阅读:
    MYSQL之基本操作
    Python操作Mysql之基本操作
    编辑器
    iOS项目评估报告
    mac安装as配置
    屏幕适配
    CocoaPods配置步骤
    android网络监测
    获取通讯录
    json解析
  • 原文地址:https://www.cnblogs.com/baimangguo/p/6064171.html
Copyright © 2020-2023  润新知