js手写轮播

最新推荐文章于 2024-07-24 11:09:48 发布

good study，day up

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量82

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_42653492/article/details/126299079

版权

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>
</head>
<body>
    <div id="outer">
        <ul id="imgList">
            <li>
                <img src="img/1.webp" alt="" srcset="">
            </li>
            <li>
                <img src="img/2.webp" alt="" srcset="">
            </li>
            <li>
                <img src="img/3.webp" alt="" srcset="">
            </li>
            <li>
                <img src="img/4.webp" alt="" srcset="">
            </li>
            <li>
                <img src="img/5.webp" alt="" srcset="">
            </li>
            <li>
                <img src="img/1.webp" alt="" srcset="">
            </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>

css部分

<style>
        *{
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 520px;
            height: 333px;
            margin: 50px auto;
            background-color: aquamarine;
            padding: 10px 0;
            position: relative;
            overflow: hidden;
        }

        #imgList {
            list-style: none;
            width: 2600px;
            position: absolute;
            left: 0;
        }

        #imgList li {
            float: left;
            margin: 0 10px;
            /* width: 500px;
            height: 333px; */
        }

        img {
            width: 500px;
            height: 333px;
        }

        #navDiv {
            position: absolute;
            bottom: 15px;
            /* (520-25*5)/2 */
            left: 197px

        }

        #navDiv a:hover {
            background-color: darkorchid;
        }

        #navDiv a {
            float: left;
            background-color: black;
            width: 15px;
            height: 15px;
            margin: 0 5px;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

    </style>

js部分

<script>
        function getStyle(obj, name) {
            if(window.getComputedStyle) {
                return getComputedStyle(obj, null)[name];
            } else {
                return obj.currentStyle[name];
            }
        }

        // var timer;

        // obj要执行动画的对象  speed移动的速度() target目标 attr要执行动画的样式 
        // callback:回调函数，这个函数将会在动画执行完毕以后执行
        function move(obj, attr, target, speed, callback) {
            clearInterval(obj.timer)
            var current =  parseInt(getStyle(obj, attr));
            if(current > target) {
                speed = -speed
            }

            // 向执行动画的对象种添加一个timer属性，用来保存它自己的定时器标识

            obj.timer=setInterval(function() {
                var oldValue =  parseInt(getStyle(obj, attr));
                console.log(oldValue)
                var newValue = oldValue + speed;
                console.log(newValue)

                // 向左移动时，需要判断newValue是否小于target
                // 向右移动时，需要判断newValue是否大于target
                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)

        }
        window.onload=function() {
            var imgList = document.getElementById("imgList");

            var imgArr = document.getElementsByTagName('img');
        
            imgList.style.width = 520*imgArr.length+'px';

            // 设置导航按钮居中
            var navDiv = document.getElementById('navDiv');
            var outer = document.getElementById('outer');

            navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2+'px';

            // 设置显示图片的索引
            var index = 0;

            var allA = document.getElementsByTagName('a');

            // 设置默认选中的效果
            allA[index].style.backgroundColor = 'darkorchid';

            for(var i=0;i<allA.length;i++) {

                // 为每一个超链接都添加一个num属性
                allA[i].num = i;


                allA[i].onclick = function() {
                    // 关闭自动切换的定时器
                    clearInterval(timer);
                    console.log(this)
                    console.log(this.num)
                    index = this.num;

                    // 切换图片
                    // imgList.style.left = -520*index + 'px';

                    move(imgList, "left", -520*index, 50, function() {
                        console.log('move');
                        autoChange();
                    })

                    setA();
                }
            }

            // 自动切换图片
            autoChange()

            function setA() {
                // 判断当前索引是否是最后一张图片
                if(index >= imgArr.length-1) {
                    // 则将index设置为0
                    index = 0;
                    // 此时显示的是最后一张，而最后一张图片和第一张是一摸一样
                    // 通过css将最后一张切换成第一张
                    imgList.style.left = 0;
                }

                for(var i=0; i<allA.length;i++) {
                    allA[i].style.backgroundColor = '';
                    console.log(allA[i].style);
                }
                allA[index].style.backgroundColor = 'darkorchid';

            }

            var timer;

            function autoChange() {
                timer = setInterval(function() {
                    // 使索引自增
                    index++;
                    // 判断index值
                    index %=imgArr.length;
                    move(imgList, 'left', -520*index,50,function() {
                        // 修改导航点
                        setA();
                    })

                },1500)
            }

        }
    </script>