webgl百宝箱

登录 立即注册
webgl百宝箱»交流 › 前端开发 › 前端攻略笔记 › 幻灯片代码

幻灯片代码

[复制链接]
查看: 219   回复: 0
xiefandaren

67

主题

67

帖子

368

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
368
2022-9-26 02:18:50   显示全部楼层   阅读模式  
幻灯片代码.png


效果查看网址

https://www.xiefansq.cn/jsTest/2022/9/9-26lunbotupian/





  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>图片轮播js-threejs百宝箱</title>
  6.                 <style>
  7.                         body { margin: 0; }
  8.                 </style>
  9.             <style>
  10.                 .outer{
  11.                     width: 1000px;
  12.                     height: 450px;
  13.                     /* border:4px solid black; */
  14.                     position: relative;
  15.                     border-radius: 10px;
  16.                     overflow: hidden;
  17.                     margin: 0 auto ;
  18.                     top:20px;
  19.                
  20.                 }
  21.             
  22.                 .inner{
  23.                     height: 100%;
  24.                     width:  100%;
  25.                     background-color: aquamarine;
  26.                     position: relative;
  27.                     left: 0px;
  28.                     display: flex;
  29.                     /* 过度动画 */
  30.                     transition: all 1s;

  32.                 }
  33.                 .outer .inner .a {
  34.                     height: 100%;
  35.                     width:  100%;

  37.                     flex-shrink: 0;
  38.                     object-fit: cover;
  39.                 }
  40.                 .outer .inner .a .img{
  41.                     height: 100%;
  42.                     width:  100%;

  44.                     flex-shrink: 0;
  45.                     object-fit: cover;
  46.                 }

  48.                 .outer .next .btn{
  49.                     /* 绝对定位并且居中切换按钮 */
  50.                     position: absolute;
  51.                     top: 0;
  52.                     bottom: 0;
  53.                     margin: auto 0;


  56.                     background-color: blue;
  57.                     color: white;
  58.                     width: 50px;
  59.                     height: 50px;
  60.                     border-radius: 8px;
  61.                     font-size: 40px;
  62.                     font-weight: bold;
  63.                     /* 字符水平居中 */
  64.                     line-height: 50px;
  65.                     text-align: center;
  66.                     user-select: none;
  67.                     display: flex;
  68.                 }
  69.                 .outer .next .left{
  70.                     left: 20px;
  71.                 }
  72.                 .outer .next .right{
  73.                     right: 20px;
  74.                 }
  75.                
  76.                .outer .nextBiao{
  77.                   /* 绝对定位并且居中切换按钮 */
  78.                   bottom: 20px;
  79.                   position: absolute;
  80.                    left: 0;
  81.                    right: 0;
  82.                  width: max-content;
  83.                     margin: 0 auto ;
  84.                     opacity: 0.2;

  86.                }
  87.                 .nextBiao .btn{
  88.                   

  90.                     height: 5px;
  91.                     width: 40px;
  92.                     background-color: blue;
  93.                     cursor: pointer;
  94.                   
  95.                 }
  96.                 .outer:hover .nextBiao{
  97.                     opacity:1;
  98.                 }
  99.             
  100.             
  101.             </style>
  102.         </head>
  103.         <body>

  105.           <div class="outer">
  106.            
  107.             <div class="inner">
  108.                 <a href="https://www.xiefansq.cn/" target="_blank"><img src="./img/1.jpg"></a>
  109.                 <a href="https://www.xiefansq.cn/" target="_blank"> <img src="./img/2.jpg"></a>
  110.                 <a href="https://www.xiefansq.cn/" target="_blank"> <img src="./img/3.jpg"></a>
  111.                
  112.                
  113.             
  114.             </div>
  115.             <div class="next">
  116.                 <button class="btn left" onclick="leftS()"><</button>
  117.                 <button class="btn right" onclick="rightS()">></button>
  118.             </div>
  119.          
  120.          
  121.             <div class="nextBiao">
  122.                 <button class="btn" onclick="setindex(0)"></button>
  123.                 <button class="btn" onclick="setindex(1)"></button>
  124.                 <button class="btn" onclick="setindex(2)"></button>
  125.             </div>
  126.           </div>
  127.           <script>
  128.             //自动滚动
  129.             // setInterval(()=>{
  130.             //     index++
  131.             //     nextImg()
  132.             // },3000 )
  133.             //重置自动滚动
  134.             function createAuto(){
  135.                 return  setInterval(()=>{
  136.                 index++
  137.                 nextImg()
  138.             },3000 )
  139.             }
  140.             let autoTimer=createAuto()
  141.             //___________
  142.             let index=0
  143.             function nextImg(){
  144.                 //获取轮播框元素
  145.                 let outDiv =document.querySelector(".outer")

  147.                 //获取轮播框宽度

  149.                 //限制下标记范围
  150.                 if(index>2){
  151.                     index=2
  152.                 }else if(index<0){
  153.                     index=0
  154.                 }
  155.                 let width = getComputedStyle(outDiv).width
  156.                 width = Number(width.slice(0,-2))
  157.                 outDiv.querySelector(".inner").style.left=index*width*-1+"px"
  158.             }

  160.             nextImg()

  162.             function leftS(){
  163.                 index--
  164.               
  165.                 nextImg()
  166.                 clearInterval(autoTimer)
  167.                 let autoTimer=createAuto()
  168.             }
  169.             function rightS(){
  170.                 index++
  171.               
  172.                 nextImg()
  173.                 clearInterval(autoTimer)
  174.                 let autoTimer=createAuto()

  176.             }
  177.             function setindex(num){
  178.                 index=num
  179.                 nextImg()
  180.             }
  181.           </script>
  182.         </body>
  183. </html>
复制代码
回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司

|Archiver|小黑屋|webgl百宝箱 ( 苏ICP备15030673号-3 ) Powered by Discuz! X3.4 © Comsenz Inc.