一か念う执着が 2022-09-01 11:24 采纳率: 94.1%
浏览 54
已结题

轮播图无缝切换效果重点正文

各位,我需要你们的帮助,目前我的轮播图出现了从最后一张切换到第一张会出现最后一张停留时间不够,最后一张切换到第一张没有实现无缝切换。点击左右按钮无法实现左右切换。
直接复制代码就可以知道原理了,上你的图片就可以看到效果,我没有解决的是无缝切换和左右按钮切换以及状态栏点击切换的功能


<!DOCTYPE html>
<html>
    <head>
        <title>测试</title>
    </head>
    <style>
        #RotationChartModule{
    width: 564px;
    height: 315px;
    margin-top: 10px;
    position: relative;
}
.PictureRotation{
    width: 564px;
    height: 315px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.tation_imgBox{
    position: absolute;
    transition-duration: 1s;
}
.tation_img{
    position: relative;
}
.tation_img img{
    width: 564px;
    height: 315px;
    display: block;
    border-radius: 10px;
    opacity: 1;
}
.tation_img.active{
    z-index: 10;
    opacity: 1;
}
.RotationDot_Dot{
    position: absolute;
    left: 244px;
    width: auto;
    height: 9px;
    z-index: 13;
    top: 280px;
    padding: 3px 5px;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 50px;
    
}
.rotation_Dot{
    width: 9px;
    height: 9px;
    background-color: #fff;
    float: left;
    margin: 0 2px;
    border-radius: 50px;
    cursor: pointer;
    list-style-type: none;
}
.rotation_Dot.active{
    background-color: #ff5000;
}
.leftButton{
    width: 20px;
    height: 30px;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    background-color: rgba(40, 38, 38, 0.2);
    position: absolute;
    top: 128px;
    left: 0;
    z-index: 40;
    border: none;
    
}
.leftButton:hover{
    background-color: rgba(40, 38, 38, 0.5);
}
.leftIcon{
    line-height: 30px;
    font-size: 12px;
    color: #fff;
    font-weight: 900;
    font-style: normal;
    position: absolute;
    left: 2px;
    top: 0px;
}
.rightButton{
    width: 20px;
    height: 30px;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    background-color: rgba(40, 38, 38, 0.2);
    position: absolute;
    top: 128px;
    right: 0;
    z-index: 40;
    border: none;
}
.rightButton:hover{
    background-color: rgba(40, 38, 38, 0.5);
}
.rightIcon{
    line-height: 30px;
    font-size: 12px;
    color: #fff;
    font-weight: 900;
    font-style: normal;
    position: absolute;
    right: 1px;
    top: 0;
}
    </style>
   <body>
    <div id="RotationChartModule">
        <div class="PictureRotation">
            <div id="tation_imgBox" style="width: 2840px;transform: translateX(0px);overflow:hidden;position: absolute;backface-visibility:hidden;">
                <div class="tation_img" style="float:left;width:564px;" data-rotaion="0"><a href=""><img src="../html/imge/O1CN011yBJBI1FtCEaHaebh_!!6000000000544-2-octopus.png" alt=""></a></div>
                <div class="tation_img" style="float:left;width:564px;" data-rotaion="1"><a href=""><img src="../html/imge/O1CN013jhNY51VGkqFZezAz_!!6000000002626-0-octopus.jpg" alt=""></a></div>
                <div class="tation_img" style="float:left;width:564px;" data-rotaion="2"><a href=""><img src="../html/imge/O1CN01uFc5A720osRJbUXo9_!!6000000006897-2-octopus.png" alt=""></a></div>
                <div class="tation_img" style="float:left;width:564px;" data-rotaion="3"><a href=""><img src="../html/imge/O1CN01q68omo1PFU3CIDAub_!!6000000001811-2-octopus.png" alt=""></a></div>
                <div class="tation_img" style="float:left;width:564px;" data-rotaion="4"><a href=""><img src="../html/imge/O1CN01VCxO9H1ujwTZEUBOU_!!6000000006074-0-octopus.jpg" alt=""></a></div>
            </div>
            <ul class="RotationDot_Dot">
                <li class="rotation_Dot active"  data-tation="0"></li>
                <li class="rotation_Dot"  data-tation="1"></li>
                <li class="rotation_Dot"  data-tation="2"></li>
                <li class="rotation_Dot"  data-tation="3"></li>
                <li class="rotation_Dot"  data-tation="4"></li>
            </ul>
            <div class="btn" style="visibility:hidden;">
                <button class="leftButton"><i class="leftIcon"></i></button>
                <button class="rightButton"><i class="rightIcon"></i></button>
            </div>
        </div>
    </div>
   </body>
   <script>
    window.onload = function(){
    var PictureRotation = document.querySelector('.PictureRotation');
    var leftButton = document.getElementsByClassName('leftButton')[0];
    var rightButton = document.getElementsByClassName('rightButton')[0];
    var tation_imgBox = PictureRotation.children[0];
    var width = PictureRotation.offsetWidth;
    var RotationDot_Dot = PictureRotation.children[1];
    var btn = document.getElementsByClassName('btn')[0];
    var index = 0;
    var timer = setInterval(function(){
     index++;
     var translatex = -index * width;
     tation_imgBox.style.transition = 'all 0.3s';
     tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
    },3000);
    tation_imgBox.addEventListener('transitionend',function(){
        if(index >= 4){
            index = 0;
            tation_imgBox.style.transition = 'none';
            var translatex = -index * width;
            tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
        }else if(index < 0){
            index = 2;
            tation_imgBox.style.transition = 'none';
            var translatex = -index *width;
            tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
        }
        RotationDot_Dot.querySelector('.active').classList.remove('active');
        RotationDot_Dot.children[index].classList.add('active');
    });
    PictureRotation.onmouseover = function(){
            btn.style.visibility = 'visible';
            clearInterval(timer);
    };
    PictureRotation.onmouseout = function(){
        btn.style.visibility = 'hidden';
        timer = setInterval(function(){
            index++;
            var translatex = -index * width;
            tation_imgBox.style.transition = 'all 0.3s';
            tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
           },3000);
    };
};
   </script>
</html>
  • 写回答

3条回答 默认 最新

  • 拾梦逅 2022-09-01 12:09
    关注
    
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title>测试</title>
        </head>
        <style>
            #RotationChartModule {
                width: 564px;
                height: 315px;
                margin-top: 10px;
                position: relative;
            }
            
            .PictureRotation {
                width: 564px;
                height: 315px;
                position: relative;
                border-radius: 10px;
                overflow: hidden;
            }
            
            .tation_imgBox {
                position: absolute;
                transition-duration: 1s;
            }
            
            .tation_img {
                position: relative;
            }
            
            .tation_img img {
                width: 564px;
                height: 315px;
                display: block;
                border-radius: 10px;
                opacity: 1;
            }
            
            .tation_img.active {
                z-index: 10;
                opacity: 1;
            }
            
            .RotationDot_Dot {
                position: absolute;
                left: 244px;
                width: auto;
                height: 9px;
                z-index: 13;
                top: 280px;
                padding: 3px 5px;
                background-color: rgba(255, 255, 255, .3);
                border-radius: 50px;
            }
            
            .rotation_Dot {
                width: 9px;
                height: 9px;
                background-color: #fff;
                float: left;
                margin: 0 2px;
                border-radius: 50px;
                cursor: pointer;
                list-style-type: none;
            }
            
            .rotation_Dot.active {
                background-color: #ff5000;
            }
            
            .leftButton {
                width: 20px;
                height: 30px;
                border-bottom-right-radius: 50px;
                border-top-right-radius: 50px;
                background-color: rgba(40, 38, 38, 0.2);
                position: absolute;
                top: 128px;
                left: 0;
                z-index: 40;
                border: none;
            }
            
            .leftButton:hover {
                background-color: rgba(40, 38, 38, 0.5);
            }
            
            .leftIcon {
                line-height: 30px;
                font-size: 12px;
                color: #fff;
                font-weight: 900;
                font-style: normal;
                position: absolute;
                left: 2px;
                top: 0px;
            }
            
            .rightButton {
                width: 20px;
                height: 30px;
                border-bottom-left-radius: 50px;
                border-top-left-radius: 50px;
                background-color: rgba(40, 38, 38, 0.2);
                position: absolute;
                top: 128px;
                right: 0;
                z-index: 40;
                border: none;
            }
            
            .rightButton:hover {
                background-color: rgba(40, 38, 38, 0.5);
            }
            
            .rightIcon {
                line-height: 30px;
                font-size: 12px;
                color: #fff;
                font-weight: 900;
                font-style: normal;
                position: absolute;
                right: 1px;
                top: 0;
            }
        </style>
    
        <body>
            <div id="RotationChartModule">
                <div class="PictureRotation">
                    <div id="tation_imgBox" style="width: 2840px;transform: translateX(0px);overflow:hidden;position: absolute;backface-visibility:hidden;">
                        <div class="tation_img" style="float:left;width:564px;" data-rotaion="0">
                            <a href=""><img src="img/img.png" alt=""></a>
                        </div>
                        <div class="tation_img" style="float:left;width:564px;" data-rotaion="1">
                            <a href=""><img src="img/img.png" alt=""></a>
                        </div>
                        <div class="tation_img" style="float:left;width:564px;" data-rotaion="2">
                            <a href=""><img src="img/img.png" alt=""></a>
                        </div>
                        <div class="tation_img" style="float:left;width:564px;" data-rotaion="3">
                            <a href=""><img src="img/img.png" alt=""></a>
                        </div>
                        <div class="tation_img" style="float:left;width:564px;" data-rotaion="4">
                            <a href=""><img src="img/img.png" alt=""></a>
                        </div>                    
                    </div>
                    <ul class="RotationDot_Dot">
                        <li class="rotation_Dot active" data-tation="0"></li>
                        <li class="rotation_Dot" data-tation="1"></li>
                        <li class="rotation_Dot" data-tation="2"></li>
                        <li class="rotation_Dot" data-tation="3"></li>
                        <li class="rotation_Dot" data-tation="4"></li>
                    </ul>
                    <div class="btn" style="visibility:hidden;">
                        <button class="leftButton"><i class="leftIcon"></i></button>
                        <button class="rightButton"><i class="rightIcon"></i></button>
                    </div>
                </div>
            </div>
        </body>
        <script>
            window.onload = function() {
                var PictureRotation = document.querySelector('.PictureRotation');
                var rightButton = document.getElementsByClassName('rightButton')[0];
                var leftButton = document.getElementsByClassName('leftButton')[0];
                var tation_imgBox = PictureRotation.children[0];
                var width = PictureRotation.offsetWidth;
                var RotationDot_Dot = PictureRotation.children[1];
                var btn = document.getElementsByClassName('btn')[0];
                var index = 0;
                var timer = setInterval(function() {
                    index++;
                    var translatex = -index * width;
                    tation_imgBox.style.transition = 'all 0.3s';
                    tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
                }, 3000);
                tation_imgBox.addEventListener('transitionend', function() {
                    if(index >= 5) {
                        index = 0;
                        tation_imgBox.style.transition = 'none';
                        var translatex = -index * width;
                        tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
                    } else if(index < 0) {
                        index = 2;
                        tation_imgBox.style.transition = 'none';
                        var translatex = -index * width;
                        tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
                    }
                    RotationDot_Dot.querySelector('.active').classList.remove('active');
                    RotationDot_Dot.children[index].classList.add('active');
                });
    
                PictureRotation.onmouseover = function() {
                    btn.style.visibility = 'visible';
                    clearInterval(timer);
                };
                PictureRotation.onmouseout = function() {
                    btn.style.visibility = 'hidden';
                    timer = setInterval(function() {
                        index++;
                        var translatex = -index * width;
                        tation_imgBox.style.transition = 'all 0.3s';
                        tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
                    }, 3000);
                };
    
                // 右侧按钮
    
                rightButton.addEventListener('click', function() {
                    index++;
                    var translatex = -index * width;
                    tation_imgBox.style.transition = 'all 0.3s';
                    tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
                })
    
                // 左侧按钮
    
                leftButton.addEventListener('click', function() {
                    if(index != 0) {
                        index--;
                        var translatex = -index * width;
                        tation_imgBox.style.transition = 'all 0.3s';
                        tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
                    }
    
                })
            };
        </script>
    
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 9月13日
  • 已采纳回答 9月5日
  • 创建了问题 9月1日

悬赏问题

  • ¥15 Mapreduce是正常的,在运行其他jar包时并没有任何问题,只是在做LogCount.jar 时出的问题。如图所示
  • ¥15 ImportError: DLL load failed while importing _iterative: 找不到指定的模块。
  • ¥15 如何通过交互分析得出某高危患者对放疗获益更多
  • ¥15 相关性分析中,p<0.05, r=0.29,怎么评价相关性呢
  • ¥15 docker部署Mongodb后输入命令报错?
  • ¥15 将下列流程图转变成python程序代码
  • ¥15 我需要全国每个城市的最新小区名字等数据。
  • ¥15 开发一个小区生态的小程序
  • ¥15 如何解决Excel中dependent dropdown list 的问题
  • ¥15 MddBootstrapInitialize2失败