轮播图技术实战

冷不防 2023-10-01 12:09 16阅读 0赞

--------------------

### typora-root-url: assetis ###

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-coJ8qZrI-1641605498062)(.\\image-20210325233927344.png)\]

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JqbXdWaV-1641605498064)(.\\image-20210326095219815.png)\]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
    
        <style>
            .box{
          
                width: 520px;
                height: 280px;
                /* border: 4px solid rgba(186, 187, 194, 0.6); */
                margin: 50px auto;
                position: relative;
            }
    
            .inner{
          
                width: 520px;
                /* overflow-x: scroll; */
                overflow-x: hidden;
                scroll-margin-left: 50px;
                
            }
            .con{
          
                width: 2600px;
                height: 100%;
                overflow: hidden;
            }
            .con>img{
          
                width: 520px;
                height: 280px;
                float: left;
            }
    
            /* 修改list的样式 */
            .list{
          
                overflow: hidden;
                list-style: none;
                position: absolute;
                bottom: 1px;
                left: 68px;
            }
            .list>li{
          
                width: 30px;
                height: 8px;
                background-color: rgb(163,163,163);
                float: left;
                margin-left: 40px;
            }
            .list>li.active{
          
                background-color: white;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="inner">
                <div class="con">
                    <img src="./image/0.jpg" alt="">
                    <img src="./image/1.jpg" alt="">
                    <img src="./image/2.jpg" alt="">
                    <img src="./image/3.jpg" alt="">
                    <img src="./image/4.jpg" alt="">
                </div>
    
                <ul class="list">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
               
            </div>
        </div>
    </body>
    
    <script>
        //获取照片元素
        var imgs_ = document.getElementsByTagName('img');
        var inner_ = document.getElementsByClassName('inner')[0];
        var lis =document.getElementsByTagName('li');
        //自动执行的时间
        var timer = null;
        var timer2 = null;//执行每一步的间隔函数
        var x = 0; //每张图片的下标
        function autoMove(){
          
            timer = setInterval(function(){
          
                x++;
                //图片下标不能大于图片的个数
                if(x>=imgs_.length){
          
                    x = 0;
                }
                //动起来
                var step = 0;//初始化步数
                var maxStep = 20; //最大20步走完
                var start = inner_.scrollLeft;//起始位置
                var end = imgs_[0].offsetWidth * x; //结束位置
                var everyStep = (end - start) / maxStep; //执行每一步的步长
                
                timer2 = setInterval(function(){
          
                    step++;
                    if(step>=maxStep){
          
                        step = 0;
                        clearInterval(timer2);
                    }
                    start += everyStep;
                    inner_.scrollLeft = start;
                },15)
    
                for(var i =0;i<lis.length;i++){
          
                    lis[i].className='';
                }
                lis[x].className = 'active';
    
                lis[x].onclick = function(){
          
                    clearInterval(timer);
                }
                imgs_[x].onclick =function(){
          
                    clearInterval(timer);
                }
                imgs_[x].ondblclick = function(){
          
                    autoMove();
                }
            },2000);
        }
    
        autoMove();
    </script>
    </html>

封装后：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
    
        <style>
            .box {
          
                width: 520px;
                height: 280px;
                /* border: 4px solid rgba(186, 187, 194, 0.6); */
                margin: 50px auto;
                position: relative;
            }
    
            .inner {
          
                width: 520px;
                /* overflow-x: scroll; */
                overflow-x: hidden;
                scroll-margin-left: 50px;
    
            }
    
            .con {
          
                width: 2600px;
                height: 100%;
                overflow: hidden;
            }
    
            .con>img {
          
                width: 520px;
                height: 280px;
                float: left;
            }
    
            /* 修改list的样式 */
            .list {
          
                overflow: hidden;
                list-style: none;
                position: absolute;
                bottom: 1px;
                left: 68px;
            }
    
            .list>li {
          
                width: 30px;
                height: 8px;
                background-color: rgb(163, 163, 163);
                float: left;
                margin-left: 40px;
            }
    
            .list>li.active {
          
                background-color: white;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="inner">
                <div class="con">
                    <img src="./image/0.jpg" alt="">
                    <img src="./image/1.jpg" alt="">
                    <img src="./image/2.jpg" alt="">
                    <img src="./image/3.jpg" alt="">
                    <img src="./image/4.jpg" alt="">
                </div>
    
                <ul class="list">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
    
            </div>
        </div>
    </body>
    
    <script>
        //获取照片元素
        var imgs_ = document.getElementsByTagName('img');
        var inner_ = document.getElementsByClassName('inner')[0];
        var lis = document.getElementsByTagName('li');
        //自动执行的时间
        var timer = null;
        var timer2 = null;//执行每一步的间隔函数
        var x = 0; //每张图片的下标
        function autoMove() {
          
            timer = setInterval(function () {
          
                x++;
                //图片下标不能大于图片的个数
                if (x >= imgs_.length) {
          
                    x = 0;
                }
                //动起来
                gogo();
    
                //改变list的状态
                change_list();
            }, 2000);
        }
        function gogo() {
          
            var step = 0;//初始化步数
            var maxStep = 20; //最大20步走完
            var start = inner_.scrollLeft;//起始位置
            var end = imgs_[0].offsetWidth * x; //结束位置
            var everyStep = (end - start) / maxStep; //执行每一步的步长
    
            timer2 = setInterval(function () {
          
                step++;
                if (step >= maxStep) {
          
                    step = 0;
                    clearInterval(timer2);
                }
                start += everyStep;
                inner_.scrollLeft = start;
            }, 15)
        }
    
        function change_list(){
          
            for (var i = 0; i < lis.length; i++) {
          
                    lis[i].className = '';
                }
                lis[x].className = 'active';
    
                lis[x].onclick = function () {
          
                    clearInterval(timer);
                }
                imgs_[x].onclick = function () {
          
                    clearInterval(timer);
                }
                imgs_[x].ondblclick = function () {
          
                    autoMove();
                }
        }
        autoMove();
    </script>
    
    </html>

clearInterval(timer);
            }
            imgs_[x].onclick = function () {
                clearInterval(timer);
            }
            imgs_[x].ondblclick = function () {
                autoMove();
            }
    }
    autoMove();

\`\`\`