手写原创纯js实现轮播图-蒲公英云

手写原创纯js实现轮播图

默认设定的图片宽度是1440px,如果有不同的可以自己对应修改即可

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>轮播图</title>
    <style type="text/css">
        html,body{
            height:100%;
            width: 100%;
            padding:0;
            margin:0;
        }
        ul,ol,li{
            padding:0;
            margin:0;
            list-style: none;
        }
        .container{
            position: relative;
            width: 1440px;
            height: 508px;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            top: 20px;
            overflow: auto;
        }
        .container::-webkit-scrollbar {display:none}
        .banner{
            position: absolute;
            z-index: 100;
            width: 1000px;
            margin: 0 auto;
            left: 50%;
            text-align: center;
            line-height: 40px;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
        }
        .main{
            height: 100%;
            width: 5760px;
            position: absolute;
        }
        #mainScroll{
            left: 0;
        }
        .main li{
            float: left;
            padding: 0;
            margin: 0;
            width: 1440px;
        }
        .main li img{
            width: 100%;
        }
        .prev-button{
            position: absolute;
            width: 30px;
            height: 30px;
            z-index: 100;
            top: 50%;
            left: 20px;
            transform: translate(0,-50%) rotate(45deg);
            border: 3px solid rgba(255,255,255,.5);
            border-right: none;
            border-top: none;
        }
        .prev-button:hover{
            border: 3px solid rgba(255,255,255,.9);
            border-right: none;
            border-top: none;
            cursor: pointer;
        }
        .next-button{
            position: absolute;
            width: 30px;
            height: 30px;
            z-index: 100;
            top: 50%;
            right: 20px;
            transform: translate(0,-50%) rotate(45deg);
            border: 3px solid rgba(255,255,255,.5);
            border-left: none;
            border-bottom: none;
        }
        .next-button:hover{
            border: 3px solid rgba(255,255,255,.9);
            border-left: none;
            border-bottom: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="banner">这里是固定内容</div>
        <ul class="main" id="mainScroll">
            <li><img src="./img/commonfile_jpg_00b4a73f2a21b3a6e0bf7f37c6274ac7.jpg"></li>
            <li><img src="./img/commonfile_jpg_9c8ddad6e1544b66121b2918df07d461.jpg"></li>
            <li><img src="./img/commonfile_jpg_aa2402bfa2825f4453231d15de26a14c.jpg"></li>
            <li><img src="./img/focus_pic_youpin.jpg"></li>
        </ul>
        <div class="prev-button" id="prev"></div>
        <div class="next-button" id="next"></div>
    </div>
</body>
<script type="text/javascript">
    //定义偏移dom
    var main = document.getElementById('mainScroll');
    //设定偏移速度单元,50更慢，默认25为0.5秒执行完毕(25*20=500毫秒)
    var sLength = 25;
    var sTime = 20;
    //点击是否执行函数,避免快速重复点击
    var ifdo = true;
    main.style.left = '0px';
    //定义偏移函数
    function moveTo(startPosition,endPosition){
        if(ifdo){
            ifdo = !ifdo;
            var initial = startPosition;
            //获取变化量
            var shift = endPosition - startPosition;
            //每毫秒偏移的量，设定一秒钟完成移动
            var singleMove = shift/sLength;
            var tick = setInterval(function(){
                if((shift<0&&initial>endPosition)||(shift>0&&initial<endPosition)){
                    if((shift<0&&(initial + singleMove)<endPosition)||(shift>0&&(initial + singleMove)>endPosition)){
                        //精度调整
                        main.style.left = endPosition + 'px';
                        clearInterval(tick);
                        ifdo = !ifdo;
                        console.log('end')
                    }else{
                        main.style.left = initial + singleMove + 'px';
                        initial = initial + singleMove;
                    }
                }else{
                    clearInterval(tick);
                    ifdo = !ifdo;
                    console.log('end')
                }
            },sTime)
        }
    }
    // 下一页
    document.getElementById('next').onclick = function(){
        var move = parseInt(main.style.left.split('px')[0]);
        if(-(move - 1440)!=main.children[0].offsetWidth*4){
            moveTo(move,move-1440)
        }
    }
    //上一页
    document.getElementById('prev').onclick = function(){
        var move = parseInt(main.style.left.split('px')[0]);
        if(move!=0){
            moveTo(move,move+1440)
        }
    }
</script>
</html>