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


    详细代码和图片在百度云里面下载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>
  • 相关阅读:
    关于int8_t,uint8_t.....等数据类型的理解
    导出函数__declspec(dllexport)
    c++中的namespace
    GitHub C 和 C++ 开源库的清单(含示例代码)
    进制之间的转换一
    为 JSON 字符串创建对象
    HTML5 简单Demo1
    主要浏览器的调试工具
    fiddler2抓包工具使用图文教程
    JAVA将秒的总和转换成时分秒的格式
  • 原文地址:https://www.cnblogs.com/leolovexx/p/5460579.html
Copyright © 2020-2023  润新知