轮播图--------js

最新推荐文章于 2024-05-28 13:09:25 发布

cc&

最新推荐文章于 2024-05-28 13:09:25 发布

阅读量59

点赞数

分类专栏： js 文章标签： css html css3

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.html页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/lun.js"></script>
    <script src="js/animation.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .focus {
            overflow: hidden;
            position: relative;
            width: 721px;
            height: 455px;
            border: 1px solid red;
            margin: 50px;
        }
        
        .focus .imgul {
            width: 500%;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        
        .focus .imgul li {
            float: left;
            list-style: none;
        }
        
        .focus .left {
            display: none;
            position: absolute;
            top: 181px;
            left: 0px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            border-radius: 50%;
            text-align: center;
            color: grey;
            font-size: 30px;
        }
        
        .focus .right {
            display: none;
            position: absolute;
            top: 190px;
            right: 0px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            border-radius: 50%;
            text-align: center;
            color: grey;
            font-size: 30px;
        }
        
        .bottom ol {
            position: absolute;
            top: 388px;
            left: 279px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 150px;
            height: 40px;
            border-radius: 8px;
            background-color: grey;
            opacity: .4;
        }
        
        .bottom ol li {
            width: 15px;
            height: 15px;
            border: 1px solid yellow;
            list-style: none;
            border-radius: 50%;
        }
        
        .bottom .current {
            background-color: red;
        }
    </style>

    <body>
        <div class="focus">
            <ul class='imgul'>
                <li>
                    <a>
                        <img src="img/focus1.jpg">
                    </a>
                </li>
                <li>
                    <a>
                        <img src="img/focus.jpg">
                    </a>
                </li>

                <li>
                    <a>
                        <img src="img/focus2.jpg">
                    </a>
                </li>
                <li>
                    <a>
                        <img src="img/focus3.jpg">
                    </a>
                </li>

            </ul>
            <div class="left">《 </div>
            <div class="right">》</div>
            <div class="bottom">
                <ol>

                </ol>
            </div>
        </div>

    </body>

</html>

2.动画效果js

function animation(obj, length, callback) {
    obj.timer = setInterval(() => {
        var step = (length - obj.offsetLeft) / 10;
        step =
            length - obj.offsetLeft > 0 ?
            Math.ceil(length - obj.offsetLeft) :
            Math.floor(length - obj.offsetLeft);
        if (obj.offsetLeft == length) {
            clearInterval(obj.timer);
            if (callback !== undefined) {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 10);
}

3.功能js

window.addEventListener('load', function() {
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var focus = document.querySelector('.focus');
    // 1. 鼠标进入左右箭头的显示与隐藏
    focus.addEventListener('mouseenter', function() {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
    });
    focus.addEventListener('mouseleave', function() {
        left.style.display = 'none';
        right.style.display = 'none';
        timer = setInterval(() => {
            right.click();
        }, 2000);
    });
    // 2. 跟随图片动态生成小圆点
    var ul = document.querySelector('.imgul');
    var lis = ul.children;
    var ol = document.querySelector('.bottom').querySelector('ol');
    for (var i = 0; i < lis.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ol.appendChild(li);
    }
    ol.children[0].className = 'current';
    // 3. 排他思想， 点击小圆点后， 小圆点变色
    // 4. 点击小圆点，图片移动
    var ollis = ol.children;
    for (var i = 0; i < ollis.length; i++) {
        ollis[i].addEventListener('click', (e) => {
            for (var i = 0; i < ollis.length; i++) {
                ollis[i].removeAttribute('class');
            }
            e.target.className = 'current';
            num = e.target.getAttribute('index');
            circle = e.target.getAttribute('index');
            animation(ul, -e.target.getAttribute('index') * focus.offsetWidth);
        });
    }
    // 5. 克隆一个图片放在最后面
    var lastimg = lis[0].cloneNode(true);
    ul.appendChild(lastimg);
    //  6. 点击右侧按钮， 向右移动
    var num = 0;
    var circle = 0;
    var flag = true;
    right.addEventListener('click', () => {
        if (flag) {
            flag = false;
            if (num == lis.length - 1) {
                ul.style.left = '0px';
                num = 0;
            }
            num++;
            animation(ul, -num * focus.offsetWidth, function() {
                flag = true
            });
            circle++;
            if (circle == ollis.length) {
                circle = 0;
            }
            for (var i = 0; i < ollis.length; i++) {
                ollis[i].className = '';
            }
            ollis[circle].className = 'current';
        }
    });
    // 7. 点击左侧按钮，向右移动
    left.addEventListener('click', () => {
        if (flag = true) {
            flag = false
            if (num == 0) {
                num = lis.length - 1;
                ul.style.left = -num * focus.offsetWidth + 'px';
            }
            num--;
            animation(ul, -num * focus.offsetWidth, () => {
                flag = true
            });
            circle--;
            if (circle < 0) {
                circle = ollis.length - 1;
            }
            for (var i = 0; i < ollis.length; i++) {
                ollis[i].className = '';
            }
            ollis[circle].className = 'current';
        }

    });
    // 8. 自动播放轮播图
    var timer = setInterval(() => {
        right.click();
    }, 2000);
});

cc&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图--------js

1.html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫