js写一个轮播图

最新推荐文章于 2024-07-10 14:03:37 发布
weixin_49696014
最新推荐文章于 2024-07-10 14:03:37 发布
阅读量243
点赞数
文章标签： javascript css3 css
本文链接：https://blog.csdn.net/weixin_49696014/article/details/122303429
版权
<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ol,ul{
            list-style: none;
        }
        .box{
            width: 300px;
            height: 150px;
            margin: 100px auto 0;
            position: relative;
            overflow: hidden;
        }
        .box ul{
            position: absolute;
            left: 0;
            top: 0;
            width: 1000%;
            height: 150px;
        }
        .box ul li{
            float: left;
            width: 300px;
            height: 150px;
        }
        .box ul li a{
            width: 100%;
            height: 100%;
        }
        .box ul li a img{
            width: 100%;
            height: 100%;
        }
        /* 设置小按钮的样式 */
        .box ol{
            position: absolute;
            right: 15px;
            bottom: 15px;
        }
        .box ol li{
            float: left;
            width: 15px;
            height: 15px;
            margin: 0 10px;
            background-color: #fff;
            color: black;
            text-align: center;
            line-height: 15px;
        }
        .box ol li.current{
            color: tomato;
        }
        /* 左右箭头 */
        .arr{
            display: none;
        }
        .arr span{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: red;
            width: 30px;
            height: 30px;
            background-color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            cursor:pointer;
        }
        .arr span:first-child{
            left: 0;
        }
        .arr span:last-child{
            right: 0;
        }
    </style>
</head>
<body>
    <!-- 轮播图的窗口 -->
    <div class="box">
        <!-- 轮播图片 -->
        <ul>
            <li>
                <a href="javaScript:;"><img src="./image/1.jpg"></a>
            </li>
            <li>
                <a href="javaScript:;"><img src="./image/2.jpg"></a>
            </li>
            <li>
                <a href="javaScript:;"><img src="./image/3.jpg"></a>
            </li>
            <li>
                <a href="javaScript:;"><img src="./image/4.jpg"></a>
            </li>
            <li>
                <a href="javaScript:;"><img src="./image/5.jpg"></a>
            </li>
        </ul>
        <!-- 小按钮 -->
        <ol></ol>
        <!-- 左右箭头 -->
        <div class="arr">
            <span><</span>
            <span>></span>
        </div>
    </div>
    <script>
        var timer = null
        // 获取元素
        var box = document.querySelector('.box')
        var ul = box.children[0]
        var ulList = ul.children
        var ol = box.children[1]
        var olList = ol.children
        var arr = box.children[2]
        var left = arr.children[0]
        var right = arr.children[1]
        // 获取图片的宽度
        var imageWidth = box.offsetWidth
        // 1、动态生成ol的结构
        for(var i = 0;i < ulList.length;i++){
            var li = document.createElement('li')
            li.innerHTML = i + 1
            ol.appendChild(li)
        }
        // 给ol的第一个添加current类
        olList[0].className = 'current'
        // 复制第一张图片到最后一位
        var li = ulList[0].cloneNode(true)
        ul.appendChild(li)
        // 2、点击某一个ol中的小按钮，将图片移动做动画
        for(var j = 0;j < olList.length;j++){
            olList[j].index = j
            // 监听ol中li的点击事件
            olList[j].addEventListener('click',function(){
                // 排他思想
                for(var k = 0;k < olList.length;k++){
                    olList[k].className = ''
                }
                this.className = 'current'
                // 做动画
                var target = -this.index * imageWidth
                animate(ul,target)
                pic = this.index
                q = this.index
            })
        }
        // 3、鼠标经过显示箭头、离开隐藏箭头
        box.addEventListener('mouseenter',function(){
            arr.style.display = 'block'
            clearInterval(timer)
        })
        box.addEventListener('mouseleave',function(){
            arr.style.display = 'none'
            timer = setInterval(rightfn,1200)
        })
        // 记录当前的显示图片的索引
        var pic = 0 // 默认显示的是第一张
        // 记录当前按钮的高亮
        var q = 0 // 默认高亮的是第一个
        // 4、点击左右箭头
        function rightfn(){
            // 点击的时候需要判断当前pic，如果当前的pic等于了最后一张图片的索引
            if(pic === ulList.length -1){
                //将ul的left值，设置为0
                ul.style.left = 0 + 'px'
                // 将pic的值，设置为0
                pic = 0
            }
            // 点击一次，显示下一张
            pic++
            var target = -pic * imageWidth
            animate(ul,target)

            // 点击右箭头的同时，切换小按钮的高亮状态
            if(q >= olList.length -1){
                q = 0
            }else{
                q++
            }
            for(var h = 0;h < olList.length;h++){
                olList[h].className = ''
            }
            olList[q].className = 'current'
        }
        right.addEventListener('click',rightfn)
        left.addEventListener('click',function(){
            if(pic === 0){
                // 此时就将pic，设置为图片的最后一位索引
                pic = ulList.length - 1
                // 将ul的位置放到最后一位
                ul.style.left = -(ulList.length - 1) * imageWidth
            }
            pic--
            var target = -pic * imageWidth
            animate(ul,target)

            if(q > 0){
                q--
            }else{
                q = olList.length -1
            }
            for(var h = 0;h < olList.length;h++){
                olList[h].className = ''
            }
            olList[q].className = 'current'
        })
        timer = setInterval(rightfn,1200)
        // 封装动画函数
        function animate(obj,target){
            clearInterval(obj.timer)
            obj.timer = setInterval(() => {
                let leader = obj.offsetLeft
                let step = 30
                step = leader > target ? -step : step
                if(Math.abs(leader - target) > Math.abs(step)){
                    obj.style.left = leader + step + 'px'
                }else{
                    obj.style.left = target + 'px'
                    clearInterval(obj.timer)
                }
            },15)
        }
    </script>
</body>
</html>