js简单实现轮播图

最新推荐文章于 2023-03-29 20:38:14 发布

阿清呀.

最新推荐文章于 2023-03-29 20:38:14 发布

阅读量116

点赞数 1

分类专栏： javascript学习路程文章标签： javascript

本文链接：https://blog.csdn.net/wzg0817/article/details/105787469

版权

javascript学习路程专栏收录该内容

48 篇文章 0 订阅

订阅专栏

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }
    
    #out {
        width: 520px;
        height: 333px;
        background-color: #bfa;
        margin: 50px auto;
        padding: 10px 0px;
        position: relative;
        overflow: hidden;
    }
    
    #imglist {
        list-style: none;
        /* width: 2600px; */
        position: absolute;
        left: 0px;
    }
    
    #imglist li {
        float: left;
        margin: 0px 10px;
    }
    
    #navdiv {
        position: absolute;
        bottom: 15px;
        /* left: 200px; */
    }
    
    #navdiv a {
        float: left;
        width: 15px;
        height: 15px;
        background-color: red;
        margin: 0 5px;
        opacity: 0.5;
        border-radius: 50%;
    }
    
    #navdiv a:hover {
        background-color: #686269;
    }
</style>
<script src="js/tool.js"></script>
<script>
    window.onload = function() {
        var img = document.getElementsByTagName("img");
        var imglist = document.getElementById("imglist");
        imglist.style.width = 520 * img.length + "px";
        // 设置导航块居中
        var navdiv = document.getElementById("navdiv");
        var out = document.getElementById("out");
        navdiv.style.left = (out.offsetWidth - navdiv.offsetWidth) / 2 + "px";

        var index = 0;
        var arra = document.getElementsByTagName("a");
        arra[index].style.backgroundColor = "#686269";

        // 为每一个超链接添加单机响应事件
        for (var i = 0; i < arra.length; i++) {
            arra[i].num = i;
            arra[i].onclick = function() {
                // 当我们手动去切换的时候，去停止轮播图
                clearInterval(timer);
                // 为每个超链接做标记
                index = this.num;

                // imglist.style.left = -520 * index + "px";
                setA();
                move(imglist, "left", -520 * index, 20, function() {
                    // 手动点击切换结束之后，再次开启定时器。
                    autoChenge();

                });
            }

        }
        autoChenge();

        function setA() {
            // 判断索引是否是最后一张
            if (index >= arra.length) {
                index = 0;
                //如果为最后一张，直接将imglist的left设置为0，
                imglist.style.left = 0;
            }
            for (var i = 0; i < arra.length; i++) {
                // 设置为空，防止设置颜色之后，在内联样式里优先级过高，
                arra[i].style.backgroundColor = "";
            }
            arra[index].style.backgroundColor = "#686269";
        }
        // 设置定时器
        // 定义定时器标识
        var timer;

        function autoChenge() {
            timer = setInterval(function() {
                index++;
                //  %= 算法 判断index的长度是否超过img的长度，如果超过就返回0
                index %= img.length;
                move(imglist, "left", -520 * index, 20, function() {
                    setA();
                });
            }, 3000);

        }
    }
</script>

<body>

    <div id="out">
        <ul id="imglist">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/1.jpg" alt=""></li>
        </ul>
        <div id="navdiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>

</body>

</html>

tool.js

//实现动画效果
function move(obj, arrtr, target, speed, callback) {
    clearInterval(obj.timer);
    // 获取当前位置
    var current = parseInt(getstyle(obj, arrtr));
    // 判断speed正负
    // 0-800 向左移
    //800-0 向右移
    if (current > target) {
        speed = -speed;
    }
    // 将timer作为属性 给自身的obj元素。
    obj.timer = setInterval(function() {
        var oldvalue = parseInt(getstyle(obj, arrtr));

        var newvalue = oldvalue + speed;
        // 向左移时，需要判断newvalue是否小于target
        // 向右移时，需要判断newvalue是否大于target
        if ((speed < 0 && newvalue < target) || (speed > 0 && newvalue > target)) {
            newvalue = target;
        }
        obj.style[arrtr] = newvalue + "px";
        if (newvalue == target) {
            clearInterval(obj.timer);
            // 如果有回调函数就调用，没有则不调用。
            callback && callback();
        }

    }, 20);
    // return false;


};

// 获取元素的样式

function getstyle(obj, name) {
    if (window.getComputedStyle) {
        return getComputedStyle(obj, null)[name];

    } else {
        return obj.currentStyle[name];
    }

}

愿你的坚持终有收获。

个人博客网站没事可以来逛逛https://aqingya.cn

阿清呀.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js简单实现轮播图

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...
复制链接

扫一扫