• JavaScript实现简单轮播图动画


    运行效果:

     源代码:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
    </head>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px
        }
    
        #container {
            margin: 30px auto;
            width: 1280px;
            height: 720px;
            position: relative;
            overflow: hidden;
        }
    
        #inner-list {
            width: 400%;
            position: absolute;
            top: 0;
            left: 0;
        }
    
        #inner-list li {
            float: left;
        }
    
        #dot-list {
            position: absolute;
            bottom: 20px;
            right: 20px;
    
        }
    
        #dot-list li {
            float: left;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            line-height: 20px;
            text-align: center;
            background: rgba(255, 255, 255, .3);
            cursor: pointer;
            margin-right: 10px;
        }
    
        #dot-list li.cur {
            background: rgba(255, 255, 255, .6);
        }
    
        .btn-ctrl {
            position: absolute;
            cursor: pointer;
            top: 50%;
            font-size: 36px;
            color: red;
            font-weight: 500;
            z-index: 2;
        }
    
        #btn-prev {
            left: 0px;
        }
    
        #btn-next {
            right: 0px;
        }
    </style>
    <body>
    <div class="container" id="container">
        <div id="btn-prev" class="btn-ctrl">&lt;</div>
        <div id="btn-next" class="btn-ctrl">&gt;</div>
        <ul id="inner-list">
            <li><img src="https://w.wallhaven.cc/full/nz/wallhaven-nzy6g4.jpg" alt=""/></li>
            <li><img src="https://w.wallhaven.cc/full/0w/wallhaven-0w6z64.jpg" alt=""/></li>
            <li><img src="https://w.wallhaven.cc/full/42/wallhaven-421zm0.jpg" alt=""/></li>
        </ul>
        <ul id="dot-list"></ul>
    </div>
    
    <script type="text/javascript">
        window.onload = function () {
            var eleInners = document.getElementById('inner-list'),
                eleDots = document.getElementById('dot-list'),
                liImgs = eleInners.getElementsByTagName('li'),
                liDots = eleDots.children,
                elePrev = document.getElementById('btn-prev'),
                eleNext = document.getElementById('btn-next'),
                LI_WIDTH = liImgs[0].offsetWidth,
                TIME_DURATION = 3000,
                interval = null,
                index = 0,
                circle = 0;
            //首先是克隆
            eleInners.appendChild(liImgs[0].cloneNode(true));
            //生成小点点
            for (var i = 0, len = liImgs.length - 1; i < len; i++) {
                var li = document.createElement('li');
                li.innerHTML = i + 1;
                eleDots.appendChild(li);
            }
            //第一个点高亮
            liDots[0].className = 'cur';
    
            //接着是动画,用差值和offsetLeft值和移动的值,给一个speed让它移动
            function animate(obj, targetPlace) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function () {
                    //判断移动的位置是向左移动还是向右移动
                    var speed = obj.offsetLeft > targetPlace ? -15 : 15;
                    var result = targetPlace - obj.offsetLeft;
                    //只要移动的差值大于speed,那么就一直让obj.style.left 改变
                    if (Math.abs(result) > Math.abs(speed)) {
                        obj.style.left = obj.offsetLeft + speed + 'px'
                    } else {
                        //否则如果已经移动的,obj.offsetleft与要移动的位置十分接近了,
                        obj.style.left = targetPlace + 'px';
                        clearInterval(obj.timer);
                    }
                }, 10)
    
            }
    
            //接着定时器
            interval = setInterval(autoplay, 5000);
    
            //向左的autoplay
            function autoplay() {
                index++;
                if (index > liImgs.length - 1) {
                    eleInners.style.left = 0;//赶快跳回去
                    index = 1;//找到第二张图片
                }
                animate(eleInners, -index * LI_WIDTH);
                circle++;
    
                if (circle >= liImgs.length - 1) {
                    circle = 0;//circle回到第一个点
                }
                for (var i = 0, len = liDots.length; i < len; i++) {
                    liDots[i].className = '';
    
                }
                liDots[circle].className = 'cur';
            }
    
            //向右移动
            function moveright() {
                index--;
                if (index < 0) {
                    eleInners.style.left = -(liImgs.length - 2) * LI_WIDTH + 'px';
                    index = liImgs.length - 2;//找到倒数第二张图片
                }
                animate(eleInners, -index * LI_WIDTH);
                circle--;
                if (circle < 0) {
                    circle = liImgs.length - 2;//circle回到最后一个点
                }
                for (var i = 0, len = liDots.length; i < len; i++) {
                    liDots[i].className = '';
                }
                liDots[circle].className = 'cur';
            }
    
    //        鼠标移入,清除定时器
            eleInners.addEventListener('mouseenter', function (event) {
                clearInterval(interval);
            });
            //        鼠标移出,开启定时器
            eleInners.addEventListener('mouseleave', function (event) {
                interval = setInterval(autoplay, 5000);
            });
    //        点击dots
            eleDots.addEventListener('click', function (event) {
                clearInterval(interval);
                var target = event.target;
                var currentTarget = event.currentTarget;
                index = target.innerHTML - 0 - 1;
                circle = index;
                for (var i = 0, len = liDots.length; i < len; i++) {
                    liDots[i].className = '';
                }
                liDots[circle].className = 'cur'
                animate(eleInners, -index * LI_WIDTH);
            });
            elePrev.addEventListener('click', function (event) {
                clearInterval(interval);
                moveright();
                interval = setInterval(autoplay, 5000)
            });
            eleNext.addEventListener('click', function (event) {
                clearInterval(interval);
                autoplay();
                interval = setInterval(autoplay, 5000);
            });
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    我对JavaWeb中中文URL编码的简单总结
    URL的编码和解码
    Maven警告解决:Using platform encoding (UTF-8 actually)
    JavaWeb编码浅解
    pageContext对象的用法详述
    JspSmartUpload 简略使用
    Web开发相关笔记 #05# MySQL中文无法匹配
    Web开发相关笔记 #04# WebSocket
    Eloquent JavaScript #02# program_structure
    Eloquent JavaScript #01# values
  • 原文地址:https://www.cnblogs.com/yijiahao/p/11742511.html
Copyright © 2020-2023  润新知