滑轮滑动+小圆点触发全屏上下滚动并实现不同浏览器窗口下的缩放

css准备:模块宽度设置为100%;模块高度设置为100vh;内容区域设置为1000*800,居中显示;
js:$(function(){
           `//初始化页面置于顶部
            $("html,body").animate({scrollTop:0},300);
            var page = 0;
            //浏览器当前窗口可视区域宽度
            var viewWidth=$(window).width();
            //浏览器当前窗口可视区域高度
            var viewHeight=$(window).height();
            //窗口宽度小于1000时,缩放
            if(viewWidth<1000){
                //可视区域的高度+下侧滚动条的高度
                viewHeight+=17;
                $(".content-box1").css("transform",'scale('+(viewWidth/1500)+')');
                $(".content-box2").css("transform",'scale('+(viewWidth/1500)+')');
                $(".content-box3").css("transform",'scale('+(viewWidth/1500)+')');

            }
            //宽度小于800时,缩放
            if(viewHeight<800){
                $(".content-box1").css("transform",'scale('+(viewHeight/900)+')');
                $(".content-box2").css("transform",'scale('+(viewHeight/900)+')');
                $(".content-box3").css("transform",'scale('+(viewHeight/900)+')');
            }
	    //窗口变化
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用以下步骤实现轮播图滚动小圆点: 1. 在 HTML 文件中添加一个 `<ul>` 元素,用于存放小圆点。 ```html <ul class="dots"></ul> ``` 2. 在 CSS 文件中设置小圆点的样式。 ```css .dots { display: flex; justify-content: center; } .dot { width: 10px; height: 10px; border-radius: 50%; background-color: #ccc; margin: 0 5px; cursor: pointer; } .dot.active { background-color: #333; } ``` 3. 在 JavaScript 文件中动态生成小圆点,并为其添加点击事件。 ```javascript const slides = document.querySelectorAll('.slide'); const dots = document.querySelector('.dots'); slides.forEach((slide, index) => { const dot = document.createElement('li'); dot.classList.add('dot'); dots.appendChild(dot); dot.addEventListener('click', () => { goToSlide(index); setActiveDot(index); }); }); function setActiveDot(index) { const activeDot = document.querySelector('.dot.active'); if (activeDot) activeDot.classList.remove('active'); const dot = dots.children[index]; dot.classList.add('active'); } ``` 4. 当切换图片时,同时切换小圆点的状态。 ```javascript let currentSlide = 0; const slideInterval = setInterval(nextSlide, 5000); function nextSlide() { goToSlide(currentSlide + 1); } function goToSlide(slideIndex) { const slides = document.querySelectorAll('.slide'); const nextSlide = slides[slideIndex]; if (slideIndex === slides.length) { slideIndex = 0; } else if (slideIndex < 0) { slideIndex = slides.length - 1; } slides.forEach(slide => { slide.style.transform = `translateX(-${slideIndex * 100}%)`; }); currentSlide = slideIndex; setActiveDot(slideIndex); } goToSlide(0); ``` 以上是一个基本的实现,你可以根据需要进行修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值