div+js实现美术画板架子图片轮换轮播效果代码-html代码-BFW代码库

div+js实现美术画板架子图片轮换轮播效果代码

代码语言：html

所属分类：幻灯片

代码描述：div+js实现美术画板架子图片轮换轮播效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body{
            background-color:lightblue;
        }
    
        .canvas-stand{
         position:absolute;
         width:500px;
         height:500px;
         margin-top:3%;
         margin-left:30%;
         display:flex;
         justify-content: center;
        
        }
    
    
        .canvas{
          position:absolute;
          width:240px;
          height:300px;
          align-self: center;  
          box-shadow: 2px 1px 5px 1px #121212;
          background-size:cover;
          background-position:center; 
          display:none;
            
        }
        
        .next{
          animation: nextAnimate 1.5s linear;
        
        }
        
        
        .canvas-one{
           background-image:url(//repo.bfw.wiki/bfwrepo/image/62aa84c02640e.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_360,h_300,/quality,q_90);
           
        }
        
         .canvas-two{
           background-image:url(//repo.bfw.wiki/bfwrepo/image/62aa84e7670f0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_360,h_300,/quality,q_90);
           
        }
        
        .canvas-three{
           background-image:url(//repo.bfw.wiki/bfwrepo/image/6284327a47c4c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_360,h_300,/quality,q_90);
         
        }
        
        .canvas-four{
           background-image:url(//repo.bfw.wiki/bfwrepo/image/628430ecc8855.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_360,h_300,/quality,q_90);
           background-size:contain;
        

        }
        
        .canvas-five{
           background-image:url(//repo.bfw.wiki/bfwrepo/image/6250baee73985.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_360,h_300,/quality,q_90);
          
      
        }
        
        .canvas-six{
           background-image:url(//repo.bfw.wiki/bfwrepo/image/6156398e20f1d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_360,h_300,/quality,q_90);
            
        }
        
        
         .canvas:before{
            content:"";
            position:absolute;
            width:4px;
            height:300px;
            margin-left:240px;
            background-color:rgba(0,0,0,0.3);
            transform:skewY(50deg);
        
        }
        
        .canvas:after{
            content:"";
            position:absolute;
            width:240px;
            height:3px;
            margin-top:-3px;
            margin-left:2px;
            background-color:rgba(0,0,0,0.2);
            transform: skewX(-50deg);
        
        }
        
        .upper-hold{
          position:absolute;
          width:150px;
          height:25px;
          margin-top:80px;
          box-shadow:0 2px 3px #696969,
           0 -1px 1px #696969   ;
          background: repeating-linear-gradient(#cd853f, #daa520 5px,#cd853f 5px); 
          z-index:2;
         
        }
        
        .upper-hold:before{
            content:"";
            position:absolute;
            width:7px;
            height:7px;
            background-color:#262626;
            border-radius:50%;
            margin-top:10px;
            margin-left:72px;
            
        }
        
         .lower-hold{
          position:absolute;
          width:250px;
          height:20px;
          margin-top:385px;
          background: repeating-linear-gradient(#cd853f, #daa520 5px,#cd853f 5px); 
          box-shadow:0 2px 3px #696969;
          z-index:2;
         
        }
        
         .lower-hold:before{
            content:"";
            position:absolute;
            width:23px;
            height:4px;
            margin-left:15px;
            margin-top:20px;
            background-color:rgba(0,0,0,0.2);
            transform:skewX(30deg);
        
        }
        
         .lower-hold:after{
            content:"";
            position:absolute;
            width:23px;
            height:4px;
            margin-left:215px;
            margin-top:20px;
            background-color:rgba(0,0,0,0.2);
            transform:skewX(-30deg);
        
        }
        
        .lower-hold-two{
          position:absolute;
          width:270px;
          height:18px;
          margin-top:470px;
          background: repeating-linear-gradient(#cd853f, #daa520 5px,#cd853f 5px); 
          box-shadow:0 3px 2px #696969,
             2px 2px 2px #696969 ;
          z-index:-1;
         
        }
        
         .lower-hold-two:before{
            content:"";
            position:absolute;
            width:269px;
            height:4px;
            margin-left:1px;
            margin-top:17px;
            background-color:rgba(0,0,0,0.3);
            transform:skewX(50deg);
        
        }
        
         .lower-hold-two:after{
            content:"";
            position:absolute;
            width:165px;
            height:3px;
            margin-top:90px;
            margin-left:50px;
            border-radius:20px 20px 0 0;
            background-color:rgba(0,0,0,0.1);
            box-shadow:0 0 15px 0 rgba(0,0,0,0.5),
              5p.........完整代码请登录后点击上方下载按钮下载查看