原生純js完璧緩衝運動の輪播図


プレビュー図
...兄弟たちは私が絶対効果がいいと信じています.gifの写真が大きすぎて届かないです.初めて録画したのは22 Mで、第二回録画したのは44 Mです.興奮しています.話が出ません.使いやすいgifソフトのオススメがありますか?
解説と紹介はコードのコメントに書いてあります.私の写真のサイズは1920×1080です.みんな自分でテストする時、写真の選択に注意してください.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>   title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        #box{
            width: 1920px;
            height: 1080px;
            margin: 1px auto;
            position: relative;
            border: 1px soild block;
            overflow: hidden;
        }
        #box #list{
            position: absolute;
            width: 13440px;
            height: 1080px;
            z-index: 1;
        }
        #box #list li{
            float: left;
            height: 1080px;
            width: 1920px;
        }
        #buttons {
            position: absolute;
            left: 910px;
            bottom: 50px;
            z-index: 2;
            height: 30px;
            width: 300px;
        }
        #buttons li {
            float: left;
            margin-right: 20px;
            width: 20px;
            height: 20px;
            border: 1px solid #fff;
            border-radius: 50%;
            background: #333;
            cursor: pointer;
            list-style: none;
        }
        #buttons .on {
            background: orangered;
        }
        .arrow {
            position: absolute;
            top: 520px;
            z-index: 2;
            display: none;
            width: 200px;
            height: 200px;
            font-size: 100px;
            /*font-weight: bold;*/
            line-height: 200px;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }

        .arrow:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        #box:hover .arrow {
            display: block;
        }

        #prev {
            left: 20px;
        }

        #next {
            right: 20px;
        }
    style>
head>
<body>
    <div id="box">
        <ul id="list" style="left: -1920px">

            <li><a href="#"><img src="5.jpg">a>li>
            <li><a href="#"><img src="1.jpg">a>li>
            <li><a href="#"><img src="2.jpg">a>li>
            <li><a href="#"><img src="3.jpg">a>li>
            <li><a href="#"><img src="4.jpg">a>li>
            <li><a href="#"><img src="5.jpg">a>li>
            <li><a href="#"><img src="1.jpg">a>li>

        ul>
        <ul id="buttons">
            <li index="1" class="on">li>
            <li index="2">li>
            <li index="3">li>
            <li index="4">li>
            <li index="5">li>
        ul>
        <a href="javascript:" id="prev" class="arrow" ><a>
        <a href="javascript:" id="next" class="arrow" >>a>
    div> 
    <script src='D:\ file\web  \tools\tools.js'>script>
    <script>
        window.onload = function() {
            var list = document.getElementById('list');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');
            var box = document.getElementById('box');
            var timer;
            function animate(offset) {//   offset        ,      ,      
                var change = offset * -1920;
                startMove(list, {left: change}, function(){});
            }           



            function play() {
                timer = setInterval(function () {
                next.onclick()
                }, 1500)
            }
            play();
            function stop() {
                clearInterval(timer);
            }
            box.onmouseover = stop;//               
            box.onmouseout = play;//              



            prev.onclick = function() {//     
                index--;
                if (index < 1) {//                             ,          ,         ,      html    7        ,                    ,           (     html  ,                 ).
                    index = 5;
                    list.style.left = -11520 + 'px';
                }
                    buttonsShow();
                    animate(index);
            }
            next.onclick = function() {//      .
                index++;
                if (index > 5) {
                    index = 1;
                     list.style.left = 0+ 'px';
                }
                buttonsShow();
                animate(index);
            }


            //    buttons
            var buttons = document.getElementById('buttons').getElementsByTagName('li');
            var index = 1;
            function buttonsShow() {//      ,      class    
                for (var i = 0; i < buttons.length; i++) {
                    if (buttons[i].className == 'on') {
                        buttons[i].className = '';
                    }
                }
                buttons[index-1].className = 'on';
            }
            for (var i = 0; i < buttons.length; i++) {
                    (function(j){//                 
                        buttons[j].onmouseenter  = function () {
                            console.log(j);
                            var clickIndex = parseInt(this.getAttribute('index'));
                            animate(clickIndex); //          ,           
                            index = clickIndex;
                            buttonsShow();
                        }
                    })(i)
                }
            }


            //      
            function startMove(obj, changeData, func) {
                //                     
                clearInterval(obj.timer);
                var iCurValue = 0;
                var iSpeed = 0;
                var bStop;
                obj.timer = window.setInterval(function () {
                    bStop = true;//                
                    iCurValue = parseInt(getStyle(obj, 'left'));
                    iSpeed = (changeData['left'] - iCurValue) / 7;//      
                    if(iSpeed > 0) {//               ,            
                        iSpeed = Math.ceil(iSpeed);
                    }else{
                        iSpeed = Math.floor(iSpeed);
                    }
                    obj.style['left'] = iCurValue + iSpeed + 'px';
                    if(iCurValue !== changeData['left']) {
                        bStop = false;
                    }
                    if(bStop) {
                        //        
                        flag = 0;
                        clearInterval(obj.timer);
                        func();//           ,       .
                    }
                }, 30);
            }
    script>
body>
html>