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>

    运行结果

  • 相关阅读:
    orcal下的中国大陆地热、重力网络数据库(用户网页模块设计)
    学生管理系统毕业论文
    图像效果算法设计—静态效果
    数字温度计(单片机课程设计)
    Orcal下的中国大陆地热、重力网络数据库(数据库模块设计)
    电脑公司财务管理系统(论文+论计)
    明天开始开年会!
    今天北京下雪了!
    三天年会开完了!
    页面元素添加提示(tooltip)
  • 原文地址:https://www.cnblogs.com/2016-zck/p/9573889.html
Copyright © 2011-2022 走看看