轮播图（原生js）

最新推荐文章于 2024-10-30 19:10:39 发布

柠檬！不萌

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量87

点赞数 1

分类专栏： javascript 文章标签： javascript js html5

本文链接：https://blog.csdn.net/qq_40654804/article/details/114791899

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #outer {
            width: 520px;
            height: 500px;
            margin: 50px auto;
            background-color: #e0e0a3;
            padding: 10px 0;
            position: relative;
            overflow: hidden;
        }
        
        #imgList {
            list-style: none;
            position: absolute;
            /*left: -510px;*/
        }
        
        #imgList li {
            float: left;
            margin: 0 10px;
        }
        
        #navDiv {
            position: absolute;
            bottom: 30px;
        }
        
        #navDiv a {
            float: left;
            width: 20px;
            height: 20px;
            /*display: block;*/
            background-color: coral;
            margin: 0 5px;
            /*设置透明*/
            opacity: 0.8;
            /*兼容IE8*/
            filter: alpha(opacity=0.8);
            bottom: 0px;
        }
        
        #navDiv a:hover {
            background-color: gray;
        }
    </style>
    <script type="text/javascript" src="tool.js"></script>
    <script>
        window.onload = function() {
            //设置ul宽度
            var imgList = document.getElementById("imgList");
            var imgArr = document.getElementsByTagName("img");
            imgList.style.width = 520 * imgArr.length + "px";
            //设置导航栏居中
            var outer = document.getElementById("outer");
            var navDiv = document.getElementById("navDiv");
            navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
            //
            var allA = document.getElementsByTagName("a");
            var index = 0;
            var timer;
            allA[index].style.backgroundColor = "gray";
            for (var i = 0; i < imgArr.length; i++) {
                allA[i].num = i;
                allA[i].onclick = function() {
                    //点击时，关闭自动切换定时器
                    clearInterval(timer);
                    index = this.num;
                    imgList.style.left = -520 * index + "px";
                    setA();
                    move(imgList, "left", -520 * index, 10, function() {
                        //动画执行完毕，自动切换
                        autoChange();
                    });
                };
            }
            autoChange();

            function setA() {
                //判断当前索引是否是最后一张图片
                if (index > imgArr.length - 1) {
                    index = 0;
                    imgList.style.left = 0 + "px";
                }
                for (var i = 0; i < allA.length; i++) {
                    allA[i].style.backgroundColor = "";
                }
                allA[index].style.backgroundColor = "gray";
            }

            function autoChange() {
                timer = setInterval(function() {
                    index %= imgArr.length;
                    move(imgList, "left", -520 * index, 10, function() {
                        setA();
                        index++;
                    });
                }, 2000);
            }
        }
    </script>
</head>

<body>
    <div id="outer">
        <ul id="imgList">
            <li><img src="img/IMG_0005.JPG"></li>
            <li><img src="img/IMG_0001.JPG"></li>
            <li><img src="img/IMG_0007.JPG"></li>
            <li><img src="img/IMG_0479.JPG"></li>
        </ul>
        <!-- 导航 -->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>

</html>

tool.js：

/**
 * 获取元素样式
 */
function getStyle(obj, name) {
    if (window.getComputedStyle) {
        return getComputedStyle(obj, null)[name];
    } else {
        return obj.currentStyle[name];
    }
}

/**
 * 参数：
 * 	obj:要执行动画对象
 * 	attr:要执行动画的样式,如：left
 * 	traget:执行动画的目标位置
 * 	speed:移动的速度
 * 	callback:回调函数
 */
function move(obj, attr, target, speed, callback) {
    clearInterval(obj.timer);
    var current = parseInt(getStyle(obj, attr));
    if (current > target) {
        speed = -speed;
    }

    obj.timer = setInterval(function() {
        var oldValue = parseInt(getStyle(obj, attr));
        //console.log(oldValue);
        var newValue = oldValue + speed;
        if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target))
            newValue = target;
        obj.style[attr] = newValue + "px";
        if (newValue == target) {
            clearInterval(obj.timer);
            callback && callback();
        }
    }, 30)
}

效果图：