• 利用背景图片制作轮播(手自一体化)


    详细代码和图片在百度云里面下载http://pan.baidu.com/s/1hs2hl6O



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>背景图片做轮播+自动轮播</title>
    <style type="text/css">
    *, body {
    margin: 0px;
    padding: 0px;

    }

    #container {
    margin-left: 200px;
    background-color: darkgrey;
    text-align: center;
    980px;

    }

    #top {
    980px;
    height: 65px;
    /**/
    background-image: url("img/topbg.png");
    background-size: auto;
    background-position: center;
    /**/
    }

    #bottom {
    980px;
    height: 65px;
    background-image: url("img/bottombg.png");
    background-size: auto;
    background-position: center;
    /**/

    }

    #banner {
    980px;
    height: 330px;
    background-image: url("img/1.jpg");
    /*background-position: left;*/
    /*background-repeat: no-repeat;*/
    position: relative;
    -webkit-transition: all 1.8s linear;

    }

    #banner-left {
    background-image: url("img/images/btn_03.png");
    60px;
    height: 60px;
    position: absolute;
    margin-top: 130px;
    opacity: 0;
    -webkit-transition: all 0.8s linear;

    }

    #banner-right {
    background-image: url("img/images/btn_01.png");
    60px;
    height: 60px;
    position: absolute;
    right: 0px;
    margin-top: 130px;
    opacity: 0;
    -webkit-transition: all 0.8s linear;
    }

    #banner:hover > #banner-right, #banner:hover > #banner-left {
    opacity: 0.8;
    /*background-image: url("../img/images/btn_02.png");*/

    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="top"></div>
    <div id="banner">
    <div id="banner-left" onclick="Oclick(this)"></div>
    <div id="banner-right" onclick="Oclick(this)"></div>
    </div>
    <div id="bottom"></div>
    </div>
    <script type="text/javascript">
    var num = 1, TM=0;
    var oBanner = document.getElementById("banner")
    var Time1 = new Date();
    var p=0;
    function Oclick(Athis) {
    TM = 1;
    oBanner.style.backgroundPosition="490px";
    clearInterval(B); //点击时清除自动轮播
    if (Athis.id.substr(7, 1) == "r") {
    num++;
    p++;
    }
    else {
    p--;
    num--;
    }
    //限制轮播极限,以免越界
    if (num > 8) {
    num = 1;
    }
    if (num < 1) {
    num = 5
    }
    oBanner.style.backgroundPosition=p*980+"px";//每次移动980 ,背景重复情况下制造推动的视觉效果
    oBanner.style.backgroundImage = "url('img/" + num + ".jpg')";

    }
    //定时调用函数,更换背
    var B= setInterval(oAtuo,2000);
    var num1=num;
    function oAtuo() {

    num1++;

    if (num1 > 8) {
    num1 = 1;
    }

    oBanner.style.backgroundImage = "url('img/" + num1 + ".jpg')";

    }


    </script>
    </body>
    </html>
  • 相关阅读:
    cloudstack secondary vm starting
    什么东西有机会
    ansible 远程以普通用户执行命令
    python 爬虫--同花顺-使用代理
    python3 Beautifulsoup <class 'bs4.element.ResultSet'> <class 'bs4.element.Tag'> 取值
    python3 raise HTTPError(req.full_url, code, msg, hdrs, fp) urllib.error.HTTPError: HTTP Error 403: Forbid
    kubernetes 生命周期问题分析
    'utf-8' codec can't decode byte 0xbc in position 1182: invalid start byte
    找回Firefox4的状态栏!Status-4-Evar扩展
    生命周期和Zend引擎
  • 原文地址:https://www.cnblogs.com/leolovexx/p/5460579.html
Copyright © 2020-2023  润新知