菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
0
0

js实现固定大小轮播图

原创
05/13 14:22
阅读数 132






  • 图片1


  • 图片2


  • 图片3


  • 图片4


  • 图片5




<
            <div class="right-arrow"><span> &gt; </span></div>
        </div>

        <!-- 底部圆点 -->
        <div class="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="txt">第1张图片</div>
</div>
<script>
    (function () {
        //获取要操作的dome 节点
        let ul = document.getElementsByClassName(‘imgList‘)[0];
        let liList = ul.getElementsByTagName("li");
        // let liList = document.getElementsByTagName(‘li‘)
        let dots = document.getElementsByClassName(‘dots‘)[0].getElementsByTagName(‘span‘)
        let arrowLeft = document.getElementsByClassName(‘left-arrow‘)[0]
        let arrowRight = document.getElementsByClassName(‘right-arrow‘)[0]
        let swipterBox = document.getElementsByClassName(‘swipter‘)[0]
        let txt = document.getElementsByClassName(‘txt‘)[0]
        //定义一个索引值 记录 当前是第几张图片  默认为0 第一张
        let indexActive = 0;
        // 每次移动的距离
        let move = `transform:translateX(0px)`
        //es6 新增 数组语法 将伪数组 转换为数组  
        dots = Array.from(dots)
        //底部圆点点击
        dots.forEach((value, index) => {
            value.onclick = function () {
                //赋值索引
                indexActive = index
                //执行轮播方法
                swipterMoveFn()
            }
        })

        // 右箭头点击
        arrowRight.onclick = () => {
            indexActive += 1
            //判断是否是最后一张图片
            if (indexActive >= liList.length) {
                indexActive = 0
            }
            //执行轮播方法
            swipterMoveFn()

        }
        //左箭头点击
        arrowLeft.onclick = () => {
            indexActive -= 1
            //判断是否是第一张图片
            if (indexActive < 0) {
                indexActive = liList.length - 1
            }
            //执行轮播方法
            swipterMoveFn()
        }

        //负责执行轮播的方法
        function swipterMoveFn() {
            //每一次点击 清楚所有 dots 的 class
            dots.forEach(value => {
                value.className = ‘ ‘
            })
            txt.innerHTML = `第${indexActive+1}张图片`
            dots[indexActive].className = "active"
            //添加移动 move 距离 当前索引 * 当前元素宽度 = 移动的距离
            move = `transform:translateX(${indexActive * -600}px)`
            //给ul 添加 style
            ul.style = move
        }

        // 自动轮播  设置没 1.5秒执行一次
        let timing = setInterval(swipterTiming, 1500)
        //自动轮播方法
        function swipterTiming() {
            indexActive += 1
            //判断是否是最后一张图片
            if (indexActive >= liList.length - 1) {
                indexActive = 0
            }
            //调用 轮播图方法
            swipterMoveFn()
        }

        //鼠标移入时 清除定时器
        swipterBox.onmouseover = () => {
            clearInterval(timing)
        }
        //鼠标移出 设置定时器
        swipterBox.onmouseleave = () => {
            timing = setInterval(swipterTiming, 1500)
        }
    })()
</script>

发表评论

0/200
0 点赞
0 评论
收藏
为你推荐 换一批