幻灯片代码

[复制链接]
查看: 598   回复: 0

211

主题

211

帖子

1166

积分

管理员

Rank: 9Rank: 9Rank: 9

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


效果查看网址

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




<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>图片轮播js-threejs百宝箱</title>
                <style>
                        body { margin: 0; }
                </style>
            <style>
                .outer{
                    width: 1000px;
                    height: 450px;
                    /* border:4px solid black; */
                    position: relative;
                    border-radius: 10px;
                    overflow: hidden;
                    margin: 0 auto ;
                    top:20px;
                
                }
             
                .inner{
                    height: 100%;
                    width:  100%;
                    background-color: aquamarine;
                    position: relative;
                    left: 0px;
                    display: flex;
                    /* 过度动画 */
                    transition: all 1s;

                }
                .outer .inner .a {
                    height: 100%;
                    width:  100%;

                    flex-shrink: 0;
                    object-fit: cover;
                }
                .outer .inner .a .img{
                    height: 100%;
                    width:  100%;

                    flex-shrink: 0;
                    object-fit: cover;
                }

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


                    background-color: blue;
                    color: white;
                    width: 50px;
                    height: 50px;
                    border-radius: 8px;
                    font-size: 40px;
                    font-weight: bold;
                    /* 字符水平居中 */
                    line-height: 50px;
                    text-align: center;
                    user-select: none;
                    display: flex;
                }
                .outer .next .left{
                    left: 20px;
                }
                .outer .next .right{
                    right: 20px;
                }
               
               .outer .nextBiao{
                  /* 绝对定位并且居中切换按钮 */
                  bottom: 20px;
                  position: absolute;
                   left: 0;
                   right: 0;
                 width: max-content;
                    margin: 0 auto ;
                    opacity: 0.2;

               }
                .nextBiao .btn{
                  

                    height: 5px;
                    width: 40px;
                    background-color: blue;
                    cursor: pointer;
                   
                }
                .outer:hover .nextBiao{
                    opacity:1;
                }
             
            
            </style>
        </head>
        <body>

          <div class="outer">
           
            <div class="inner">
                <a href="https://www.xiefansq.cn/" target="_blank"><img src="./img/1.jpg"></a>
                <a href="https://www.xiefansq.cn/" target="_blank"> <img src="./img/2.jpg"></a>
                <a href="https://www.xiefansq.cn/" target="_blank"> <img src="./img/3.jpg"></a>
                
               
            
            </div>
            <div class="next">
                <button class="btn left" onclick="leftS()"><</button>
                <button class="btn right" onclick="rightS()">></button>
            </div>
          
          
            <div class="nextBiao">
                <button class="btn" onclick="setindex(0)"></button>
                <button class="btn" onclick="setindex(1)"></button>
                <button class="btn" onclick="setindex(2)"></button>
            </div>
          </div>
          <script>
            //自动滚动
            // setInterval(()=>{
            //     index++
            //     nextImg()
            // },3000 )
            //重置自动滚动
            function createAuto(){
                return  setInterval(()=>{
                index++
                nextImg()
            },3000 )
            }
            let autoTimer=createAuto()
            //___________
            let index=0
            function nextImg(){
                //获取轮播框元素
                let outDiv =document.querySelector(".outer")

                //获取轮播框宽度

                //限制下标记范围
                if(index>2){
                    index=2
                }else if(index<0){
                    index=0
                }
                let width = getComputedStyle(outDiv).width
                width = Number(width.slice(0,-2))
                outDiv.querySelector(".inner").style.left=index*width*-1+"px"
            }

            nextImg()

            function leftS(){
                index--
              
                nextImg()
                clearInterval(autoTimer)
                let autoTimer=createAuto()
            }
            function rightS(){
                index++
              
                nextImg()
                clearInterval(autoTimer)
                let autoTimer=createAuto()

            }
            function setindex(num){
                index=num
                nextImg()
            }
          </script>
        </body>
</html>




回复

使用道具 举报

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

高级模式

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