zoukankan      html  css  js  c++  java
  • 2D轮播图

    目录结构

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .population{
    600px;
    height: 300px;
    background: white;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    }
    .SlideBlock{
    600px;
    height: 300px;
    }
    .controlButton{
    105px;
    height: 20px;
    position: absolute;
    background:rgba(255,255,255,0.5);
    border-radius: 15px 15px 15px 15px;
    margin:270px 247px 20px 248px;
    z-index: 99;
    }
    .controlButton ul{
    65px;
    height: 20px;
    margin: 0 auto;
    padding: 0px;
    }
    .controlButtonEach{
    background: #ff1d38;
    11px;
    height: 11px;
    border-radius: 50%;
    list-style: none;
    float: left;
    margin-left: 10px;
    margin-top: 2px;
    cursor: pointer;
    border: 2px rgba(255,255,255,1) solid;
    }
    .changeBlockBefore{
    600px;
    height: 300px;
    float: left;
    position: absolute;
    margin-left: 600px;
    transition: 0.5s;
    }
    .changeBlockAfter{
    600px;
    height: 300px;
    float: left;
    position: absolute;
    margin-left: 0px;
    transition: 0.5s;
    }
    .changeButton{
    background: white;
    11px;
    height: 11px;
    border-radius: 50%;
    list-style: none;
    float: left;
    margin-left: 10px;
    margin-top: 2px;
    cursor: pointer;
    border: 2px #ff1d38 solid;
    }
    .LeftControl{
    20px;
    height: 50px;
    background: rgba(0,0,0,0.5);
    line-height: 50px;
    text-align: center;
    float: left;
    color: white;
    margin:125px 560px 125px 0;
    z-index: 99;
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    }
    .RightControl{
    20px;
    height: 50px;
    background: rgba(0,0,0,0.5);
    line-height: 50px;
    text-align: center;
    float: left;
    margin:125px 0 125px 580px;
    color: white;
    z-index: 99;
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    }
    </style>
    </head>
    <body>
    <div class="population">
    <div class="LeftControl"><</div>
    <div class="RightControl">></div>
    <div class="controlButton">
    <ul>
    <li style="margin-left: 0px;" class="changeButton"></li>
    <li class="controlButtonEach"></li>
    <li class="controlButtonEach"></li>
    </ul>
    </div>
    <div class="SlideBlock">
    <div class="changeBlockAfter" style="background-color: red;"><img src="img1.jpg"/></div>
    <div class="changeBlockBefore" style="background-color: gray;"><img src="img2.jpg"/></div>
    <div class="changeBlockBefore" style="background-color: green;"><img src="img3.jpg"/></div>
    </div>
    </div>
    </body>
    <script type="text/javascript">
    var childPopulation = document.getElementsByClassName('population')[0];
    var childBlock = document.getElementsByClassName('SlideBlock')[0];
    var childControlButton = document.getElementsByClassName('controlButton')[0];
    var eachBlock = childBlock.getElementsByTagName('div');
    var eachButton = childControlButton.getElementsByTagName('li');
    var childLeft = document.getElementsByClassName('LeftControl')[0];
    var childRight = document.getElementsByClassName('RightControl')[0];
    childPopulation.onmousemove = function(){
    childLeft.style.opacity = '1';
    childRight.style.opacity = '1';
    childPopulation.style.cursor = 'pointer';}
    childPopulation.onmouseout = function(){
    childLeft.style.opacity = '0';
    childRight.style.opacity = '0';}

    for (var i = 0; i < 3; i++) {
    eachButton[i].index = i;
    eachButton[i].onmousemove = function(){
    num = this.index;
    for (var j = 0; j < 3; j++) {
    eachBlock[j].className = 'changeBlockBefore';
    eachButton[j].className = "controlButtonEach";
    }
    this.className = 'changeButton';
    eachBlock[num].className = 'changeBlockAfter';
    }}

    var num = 0;
    childRight.onclick = function(){
    clearInterval(AutoId);
    num += 1;
    if(num >= 3){
    num = 0;
    }
    for (var j = 0; j < 3; j++) {
    eachBlock[j].className = 'changeBlockBefore';
    eachButton[j].className = "controlButtonEach";
    }
    eachButton[num].className = 'changeButton';
    eachBlock[num].className = 'changeBlockAfter';}
    childRight.onmousemove = function(){
    childRight.style.background = 'rgba(0,0,0,0.8)'
    }
    childRight.onmouseout = function(){
    childRight.style.background = 'rgba(0,0,0,0.5)'
    clearInterval(AutoId);
    AutoPlay();};
    childLeft.onclick = function(){
    clearInterval(AutoId);
    num -= 1;
    if(num <= -1){
    num = 2;
    }
    for (var j = 0; j < 3; j++) {
    eachBlock[j].className = 'changeBlockBefore';
    eachButton[j].className = "controlButtonEach";
    }
    eachButton[num].className = 'changeButton';
    eachBlock[num].className = 'changeBlockAfter';;};
    childLeft.onmousemove = function(){
    childLeft.style.background = 'rgba(0,0,0,0.8)'
    }
    childLeft.onmouseout = function(){
    childLeft.style.background = 'rgba(0,0,0,0.5)'
    clearInterval(AutoId);
    AutoPlay();}

    var AutoChange = function (){
    num ++;
    if(num > 2){
    num = 0;
    }
    for (var k = 0; k < 3; k++) {
    eachButton[k].className = "controlButtonEach";
    eachBlock[k].className = 'changeBlockBefore';
    }
    eachButton[num].className = "changeButton";
    eachBlock[num].className = 'changeBlockAfter';}
    function AutoPlay(){
    AutoId = setInterval(AutoChange,2500);
    };
    AutoPlay();

    childBlock.onmousemove = function(){
    clearInterval(AutoId);
    }
    childBlock.onmouseout = function(){
    clearInterval(AutoId);
    AutoPlay();
    }
    </script>
    </html>

    运行结果

  • 相关阅读:
    修改科目的字段状态组-OBC4
    采购收货-对于物料,在工厂、库存地点中不存在物料主数据
    采购收货
    新建工厂
    采购订单收货提示,T169P表不存在
    维护工厂日历
    开始创建物料没有选择会计视图,需要怎么维护
    拓端数据tecdat|R语言分布滞后线性和非线性模型(DLMs和DLNMs)分析时间序列数据
    拓端数据tecdat|R语言分布滞后非线性模型(DLNM)研究发病率,死亡率和空气污染示例
    拓端数据tecdat|R语言中实现广义相加模型GAM和普通最小二乘(OLS)回归
  • 原文地址:https://www.cnblogs.com/2016-zck/p/9573889.html
Copyright © 2011-2022 走看看