纯CSS实现图片切换(按键切换/自动切换)

2020-10-23 17:31 夕降巫咸 主页 > 网站制作 > DIV/CSS >
浏览

本篇文章主要是实现通过纯CSS实现图片切换和定时切换

一、通过点击切换

html


  1.  
    <div id="hewenqislider" class="csslider">
  2.  
    <input type="radio" name="slides" id="slides_1" checked />
  3.  
    <input type="radio" name="slides" id="slides_2" />
  4.  
    <ul>
  5.  
    <li align="center">
  6.  
    <img src="img/alimt.png" />
  7.  
    </li>
  8.  
    <li align="center">
  9.  
    <img src="img/nlp.png" />
  10.  
    </li>
  11.  
    </ul>
  12.  
    <div class="arrows">
  13.  
    <label for="slides_1"></label>
  14.  
    <label for="slides_2"></label>
  15.  
    </div>



  16.  
    </div>


CSS


  1.  
    .csslider {
  2.  
    -moz-perspective: 1300px;
  3.  
    -ms-perspective: 1300px;
  4.  
    -webkit-perspective: 1300px;
  5.  
    perspective: 1300px;
  6.  
    display: inline-block;
  7.  
    text-align: left;
  8.  
    position: relative;
  9.  
    margin-bottom: 22px;
  10.  
    }
  11.  
     
  12.  
    .csslider>input {
  13.  
    display: none;
  14.  
    }
  15.  
     
  16.  
    .csslider>input:nth-of-type(10):checked~ul li:first-of-type {
  17.  
    margin-left: -900%;
  18.  
    }
  19.  
     
  20.  
    .csslider>input:nth-of-type(9):checked~ul li:first-of-type {
  21.  
    margin-left: -800%;
  22.  
    }
  23.  
     
  24.  
    .csslider>input:nth-of-type(8):checked~ul li:first-of-type {
  25.  
    margin-left: -700%;
  26.  
    }
  27.  
     
  28.  
    .csslider>input:nth-of-type(7):checked~ul li:first-of-type {
  29.  
    margin-left: -600%;
  30.  
    }
  31.  
     
  32.  
    .csslider>input:nth-of-type(6):checked~ul li:first-of-type {
  33.  
    margin-left: -500%;
  34.  
    }
  35.  
     
  36.  
    .csslider>input:nth-of-type(5):checked~ul li:first-of-type {
  37.  
    margin-left: -400%;
  38.  
    }
  39.  
     
  40.  
    .csslider>input:nth-of-type(4):checked~ul li:first-of-type {
  41.  
    margin-left: -300%;
  42.  
    }
  43.  
     
  44.  
    .csslider>input:nth-of-type(3):checked~ul li:first-of-type {
  45.  
    margin-left: -200%;
  46.  
    }
  47.  
     
  48.  
    .csslider>input:nth-of-type(2):checked~ul li:first-of-type {
  49.  
    margin-left: -100%;
  50.  
    }
  51.  
     
  52.  
    .csslider>input:nth-of-type(1):checked~ul li:first-of-type {
  53.  
    margin-left: 0%;
  54.  
    }
  55.  
     
  56.  
    .csslider>ul {
  57.  
    position: relative;
  58.  
    width: 420px;
  59.  
    height: 300px;
  60.  
    z-index: 1;
  61.  
    font-size: 0;
  62.  
    line-height: 0;
  63.  
    margin: 0 auto;
  64.  
    padding: 0;
  65.  
    overflow: hidden;
  66.  
    white-space: nowrap;
  67.  
    -moz-box-sizing: border-box;
  68.  
    -webkit-box-sizing: border-box;
  69.  
    box-sizing: border-box;
  70.  
    }
  71.  
     
  72.  
    .csslider>ul>li {
  73.  
    position: relative;
  74.  
    display: inline-block;
  75.  
    width: 100%;
  76.  
    height: 100%;
  77.  
    overflow: hidden;
  78.  
    font-size: 15px;
  79.  
    font-size: initial;
  80.  
    line-height: normal;
  81.  
    -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  82.  
    -o-transition: all 0.5s ease-out;
  83.  
    -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  84.  
    transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  85.  
    -moz-background-size: cover;
  86.  
    -o-background-size: cover;
  87.  
    -webkit-background-size: cover;
  88.  
    background-size: cover;
  89.  
    vertical-align: top;
  90.  
    -moz-box-sizing: border-box;
  91.  
    -webkit-box-sizing: border-box;
  92.  
    box-sizing: border-box;
  93.  
    white-space: normal;
  94.  
    }
  95.  
     
  96.  
    .csslider>ul>li.scrollable {
  97.  
    overflow-y: scroll;
  98.  
    }
  99.  
     
  100.  
     
  101.  
     
  102.  
    .csslider>.arrows {
  103.  
    -webkit-touch-callout: none;
  104.  
    -webkit-user-select: none;
  105.  
    -khtml-user-select: none;
  106.  
    -moz-user-select: none;
  107.  
    -ms-user-select: none;
  108.  
    user-select: none;
  109.  
    }
  110.  
     
  111.  
     
  112.  
    .csslider>.arrows {
  113.  
    position: absolute;
  114.  
    left: -31px;
  115.  
    top: 50%;
  116.  
    width: 100%;
  117.  
    height: 26px;
  118.  
    padding: 0 31px;
  119.  
    z-index: 0;
  120.  
    -moz-box-sizing: content-box;
  121.  
    -webkit-box-sizing: content-box;
  122.  
    box-sizing: content-box;
  123.  
    }
  124.  
     
  125.  
    .csslider>.arrows label {
  126.  
    display: none;
  127.  
    position: absolute;
  128.  
    top: -50%;
  129.  
    padding: 13px;
  130.  
    box-shadow: inset 2px -2px 0 1px #3a3a3a;
  131.  
    cursor: pointer;
  132.  
    -moz-transition: .15s;
  133.  
    -o-transition: .15s;
  134.  
    -webkit-transition: .15s;
  135.  
    transition: .15s;
  136.  
    }
  137.  
     
  138.  
    .csslider>.arrows label:hover {
  139.  
    box-shadow: inset 3px -3px 0 2px #71ad37;
  140.  
    margin: 0 0px;
  141.  
    }
  142.  
     
  143.  
    .csslider>.arrows label:before {
  144.  
    content: '';
  145.  
    position: absolute;
  146.  
    top: -100%;
  147.  
    left: -100%;
  148.  
    height: 300%;
  149.  
    width: 300%;
  150.  
    }
  151.  
     
  152.  
    .csslider.infinity>input:first-of-type:checked~.arrows label:last-of-type,
  153.  
    .csslider>input:nth-of-type(1):checked~.arrows label:nth-of-type(0),
  154.  
    .csslider>input:nth-of-type(2):checked~.arrows label:nth-of-type(1),
  155.  
    .csslider>input:nth-of-type(3):checked~.arrows label:nth-of-type(2),
  156.  
    .csslider>input:nth-of-type(4):checked~.arrows label:nth-of-type(3),
  157.  
    .csslider>input:nth-of-type(5):checked~.arrows label:nth-of-type(4),
  158.  
    .csslider>input:nth-of-type(6):checked~.arrows label:nth-of-type(5),
  159.  
    .csslider>input:nth-of-type(7):checked~.arrows label:nth-of-type(6),
  160.  
    .csslider>input:nth-of-type(8):checked~.arrows label:nth-of-type(7),
  161.  
    .csslider>input:nth-of-type(9):checked~.arrows label:nth-of-type(8),
  162.  
    .csslider>input:nth-of-type(10):checked~.arrows label:nth-of-type(9),
  163.  
    .csslider>input:nth-of-type(11):checked~.arrows label:nth-of-type(10) {
  164.  
    display: block;
  165.  
    left: 0;
  166.  
    -moz-transform: rotate(45deg);
  167.  
    -ms-transform: rotate(45deg);
  168.  
    -o-transform: rotate(45deg);
  169.  
    -webkit-transform: rotate(45deg);
  170.  
    transform: rotate(45deg);
  171.  
    }
  172.  
     
  173.  
    .csslider.infinity>input:last-of-type:checked~.arrows label:first-of-type,
  174.  
    .csslider>input:nth-of-type(1):checked~.arrows label:nth-of-type(2),
  175.  
    .csslider>input:nth-of-type(2):checked~.arrows label:nth-of-type(3),
  176.  
    .csslider>input:nth-of-type(3):checked~.arrows label:nth-of-type(4),
  177.  
    .csslider>input:nth-of-type(4):checked~.arrows label:nth-of-type(5),
  178.  
    .csslider>input:nth-of-type(5):checked~.arrows label:nth-of-type(6),
  179.  
    .csslider>input:nth-of-type(6):checked~.arrows label:nth-of-type(7),
  180.  
    .csslider>input:nth-of-type(7):checked~.arrows label:nth-of-type(8),
  181.  
    .csslider>input:nth-of-type(8):checked~.arrows label:nth-of-type(9),
  182.  
    .csslider>input:nth-of-type(9):checked~.arrows label:nth-of-type(10),
  183.  
    .csslider>input:nth-of-type(10):checked~.arrows label:nth-of-type(11),
  184.  
    .csslider>input:nth-of-type(11):checked~.arrows label:nth-of-type(12) {
  185.  
    display: block;
  186.  
    right: 0;
  187.  
    -moz-transform: rotate(225deg);
  188.  
    -ms-transform: rotate(225deg);
  189.  
    -o-transform: rotate(225deg);
  190.  
    -webkit-transform: rotate(225deg);
  191.  
    transform: rotate(225deg);
  192.  
    }
  193.  
    /*#region MODULES */
  194.  
    /*#endregion */
  195.  
     
  196.  
    ul,
  197.  
    ol {
  198.  
    padding-left: 40px;
  199.  
    background-color: white;
  200.  
    }
  201.  
     
  202.  
    html,
  203.  
    body {
  204.  
    height: 100%;
  205.  
    text-align: center;
  206.  
    font: 400 100% 'Raleway', 'Lato';
  207.  
    }
  208.  
     
  209.  
    .scrollable p {
  210.  
    padding: 30px;
  211.  
    text-align: justify;
  212.  
    line-height: 140%;
  213.  
    font-size: 120%;
  214.  
    }
  215.  
     
  216.  
    #hewenqislider a {
  217.  
    color: greenyellow
  218.  
    }
  219.  
     
  220.  
    .csslider>ul {
  221.  
    width: 375px;
  222.  
    /*在这里改变宽度 何问起*/
  223.  
    }
     


二、自动切换

html


  1.  
    <div id="frame" >
  2.  
    <div id="photos" class="play">
  3.  
    <img src="img/alimt.png" >
  4.  
    <img src="img/mtsaiAI.png" >
  5.  
    </div>
  6.  
    </div>


CSS


  1.  
    #frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}
  2.  
    #dis{position:absolute;left:-50px;top:-10px;opacity:.5}
  3.  
    #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
  4.  
    #photos img{float:left;width:300px;height:200px}
  5.  
    #photos { position: absolute;z-index:9; width: calc(300px * 2);/*---修改图片数量的话需要修改下面的动画参数*/ }
  6.  
    .play{ animation: ma 10s ease-out infinite alternate;}
  7.  
    @keyframes ma {
  8.  
    0%,45% { margin-left: 0px; }
  9.  
    50%,100% { margin-left: -300px; }


  10.  
    }