前段实现两个图片轮播

本文介绍了一种使用JavaScript实现网页中滑动轮播图的方法。通过设置定时器自动改变图片位置,实现图片左右滚动效果,并在鼠标悬停时停止滚动,在鼠标离开时继续滚动。适用于多种类型的轮播图应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

     window.onload = function () {
        // 1.获取标签
        var oPicDiv = document.getElementById("pic"),
            oList = document.getElementById("list"),
            oPicDiv1 = document.getElementById("pic1"),
            oList1 = document.getElementById("list1");
        // 添加两份的内容复制网页
        oList1.innerHTML = oList1.innerHTML + oList1.innerHTML;
        oList.innerHTML = oList.innerHTML + oList.innerHTML;
        // 2.默认左边滚动: left
        var iLeft = 0;// 位置
        var iPosition = -1;// 方向
        function fnAnimation() {
            iLeft += iPosition;
            //判断切换
            if (iLeft < -1000) {
                iLeft = 0;
            }
            if (iLeft > 0) {
                iLeft = -1000;
            }
            oList.style.left = iLeft + "px";
            oList1.style.left = iLeft + "px";
            console.log("定时器一直在走");
        }
      var timer =   setInterval(fnAnimation,35);
        // 4.监听鼠标
        oPicDiv.onmouseover = function () {
             //干掉计时器
             clearInterval(timer);
        }
        // 鼠标移开 动画开始
        oPicDiv.onmouseout = function () {
            // 重新开启
            timer =  setInterval(fnAnimation,35);

        }
        oPicDiv1.onmouseover = function () {
            // 干掉计时器
            clearInterval(timer);
        }
        // 鼠标移开 动画开始
        oPicDiv1.onmouseout = function () {
            // 重新开启
            timer = setInterval(fnAnimation, 35);
        }
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值