小米官网过渡式轮播图

最新推荐文章于 2023-02-20 20:49:33 发布
最新推荐文章于 2023-02-20 20:49:33 发布
阅读量707 收藏 8
点赞数 2
分类专栏： 前端练手
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51235736/article/details/113827719
版权

如果想看最优解，请跳到Version 2

Version 1

第一次自己尝试轮播图，思路大概是这样的：

点击按钮切换图片&导航点→点击导航点切换图片→自动播放图片并切换导航点→添加过渡效果

其中，切换图片用的是修改src的方式，导致我在添加过渡时绕了弯路，最后的效果差强人意，这只是过渡轮播图的第一版。

后来又尝试了把图片横着排，改变left的第二版，意识到官网的过渡效果应该同时包括淡入和淡出，即上一张图片淡出的时候下一张图片淡入，我前两次的尝试都是把每张图片分开的，不论是修改src还是修改left，两张图片没有交集，自然做不出好的过渡效果。
HTML

    <div class="banner-wrapper">
          <div class="banner w">
              <ul class="img">
                    <li><a href="#"><img class="banner-img"src="./img/banner1.jpg"></a></li>
              </ul>
              <div class="dot-wrapper">
                  <a href="#" class="dot"></a>
                  <a href="#" class="dot"></a>
                  <a href="#" class="dot"></a>
                  <a href="#" class="dot"></a>
                  <a href="#" class="dot"></a>
              </div>
              <div>
                  <a href="#" class="prev"></a>
              </div>
              <div>
                  <a href="#" class="next"></a>
              </div>
          </div>
    </div>

CSS

.banner{
    position: relative;
    height: 460px;
}
.banner .img li{
    position: absolute;
}
.banner .banner-img{
    width: 100%;
}
.transition{
    width: 100%;
    animation: Ani 800ms linear 1;
}
@keyframes Ani{
    0%{
        opacity: 0.4;
    }
    100%{
        opacity: 1;
    }
}
.dot-wrapper{
    width: 80px;
    height: 10px;
    bottom: 22px;
    right: 35px;
    position: absolute;
}
.dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .4);
    border: 2px rgba(255, 255, 255, .4) solid;
    margin-left: 6px;
    float: left;
}
.active{
    border-color: rgba(0, 0, 0, .4);
    background-color:rgba(255, 255, 255, .4);    
}
.dot:hover{
    border-color: rgba(0, 0, 0, .4);
    background-color:rgba(255, 255, 255, .4);
}
.prev,.next{
    display: block;
    position: absolute;
    width: 41px;
    height: 69px;
    background-image: url(../img/icon-slides.png);
    top: 184px;
}
.prev{
    left: 233px;
    background-position: -83px;
}
.prev:hover{
    background-position: 0px;
}
.next{
    right: 0;
    background-position: -124px;
}
.next:hover{
    background-position: -41px;
}

JS

window.onload = function(){
    let prev = document.getElementsByClassName("prev")[0];
    let next = document.getElementsByClassName("next")[0];
    let img = document.getElementsByClassName("banner-img")[0];
    let dots = document.getElementsByClassName("dot");
    let imgArr = ["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg","img/banner4.jpg","img/banner5.jpg"];
    let index = 0;
    //let count = 0; 动画播放次数计时器
    dots[index].className = "dot active"//让第一个导航点选中
    //点击按钮切换图片，改变导航点，设置过渡
    prev.onclick = function(){
        index--;
        // count++;
        if(index < 0){
            index = imgArr.length - 1;
        }
        // if(img.className == "transition2" || img.className == "banner-img"){
        //     img.className = "transition1";
        // }
        // if(img.className == "transition1" || img.className == "banner-img"){
        //     img.className = "transition2";
        // }
        //尝试双类名交替，让动画多次播放，失败

        //img.className = "transition";
        //img.style.animationIterationCount = count;
        //尝试增加播放次数，让动画多次播放，失败

        img.className = "transition";//这一句必需，否则transition函数的第一句无法发挥作用，达不到预期效果
        transition();//必须在第一句的下面

        img.src = imgArr[index];
        dots[index].className = "dot active";//让当前导航点选中
        if(index+1 <= dots.length-1){
            dots[index+1].className = "dot";
        }
        else{
            dots[0].className = "dot";
        }
        clearInterval(timer);//关闭之前的定时器(每次点击按钮时要重新开始计时)
        timer = autoRun();//设置新的定时器
    }

    next.onclick = function(){
        index++;
        if(index > imgArr.length -1){
            index = 0;
        }
        img.className = "transition";
        transition();
        img.src = imgArr[index];
        dots[index].className = "dot active";//让当前导航点选中
        if(index-1 >= 0){
            dots[index-1].className = "dot"
        }
        else{
            dots[dots.length-1].className = "dot"
        }
        clearInterval(timer);//关闭之前的定时器
        timer = autoRun();//设置新的定时器
    }

    //点击导航点切换图片
    let tmp = 0;
    for(let i = 0;i < dots.length; i++){
        dots[i].onclick = function(){
            dots[index].className = "dot";
            //双变量方法：index是点击prev和next对应的图片编号，i是属于每个导航点的编号
            //不能在2个for循环内都用index，否则无法修改index，即最后一行的代码无法实现

            //先让index对应的导航点未选中
            dots[tmp].className = "dot";
            //tmp表示之前 通过点击导航点 而选中的导航点，让它未选中
            dots[i].className = "dot active";
            //让 最新一次点击的导航点 选中
            img.src = imgArr[i];
            img.className = "transition";
            transition();
            //改变图片
            tmp = i;
            //更新tmp
            index = i;
            //修改index，否则再次点击prev或next时会出问题

            clearInterval(timer);//关闭之前的定时器
            timer = autoRun();//设置新的定时器
        }
    }
    timer = autoRun();

    img.style.transitionDuration = "1s";
    //图片的自动轮播函数
    function autoRun(){
        let timer = setInterval(function(){
            index++;
            if(index >= imgArr.length){
                index = 0;
                dots[dots.length-1].className = "dot";
            }
            else{
                dots[index-1].className = "dot";
            }
            img.src = imgArr[index];
            img.className = "transition";
            transition();
            dots[index].className = "dot active";
        },5000);
        // let timer_ = transition();
        // img.style.opacity = 1;
        return timer;
        //timer封装在autoRun函数内，外层访问不到，必须返回timer，这样才能关闭定时器
    }

    //轮播的过渡效果
    function transition(){
        // img.style.opacity = 1;   默认值
        // let timer_ = setTimeout(() => {
        //     img.style.opacity = 0;
        // }, 4000);
        // img.style.opacity = 1;
        //如果像上边这样写，会先执行最后一行代码，再执行定时器，错误
        //setTimeOut定时器不可行，因为在点击按钮和导航点时是等不到4s的，会失去过渡效果，而且定时器的开关问题比较麻烦

        document.querySelector(".transition").className = "banner-img";
        //注意，需要先在prev,next和导航点的onclick回调函数中，将img的className设为transition
        window.requestAnimationFrame(function(time){
            window.requestAnimationFrame(function(time){
                document.querySelector(".banner-img").className = "transition";
            });
        });
    }
    //如果不在上方直接调用transition函数，写成这种绑定的形式也可以：
    // document.querySelector(".prev").addEventListener("click", transition, false);
    // document.querySelector(".next").addEventListener("click", transition, false);
    // for(let j = 0;j < dots.length;j++){
    //     dots[j].addEventListener("click", transition, false);
    // }
}

最后过渡的效果，是反复执行一段动画（半透明→不透明）实现的，至于如何反复执行一段动画，参考了CSS动画之animation再次触发与防止多次触发

Version 2

后来上网查，发现正确做法应该是：把所有图片叠在一起，每次只有一张的opacity值为1，其它为0，切换图片时候就把要隐藏元素的opacity设为0，要显示的设为1，再加上transition过渡，大功告成

HTML

    <div class="banner-wrapper">
          <div class="banner w">
              <ul class="img-list">
                    <li class="banner-img no-trans"><a href="#"><img src="./img/banner1.jpg"></a></li>
                    <li class="banner-img"><a href="#"><img src="./img/banner2.jpg"></a></li>
                    <li class="banner-img"><a href="#"><img src="./img/banner3.jpg"></a></li>
                    <li class="banner-img"><a href="#"><img src="./img/banner4.jpg"></a></li>
                    <li class="banner-img"><a href="#"><img src="./img/banner5.jpg"></a></li>
              </ul>
              <div class="dot-wrapper">
                  <a href="#" class="dot"></a>
                  <a href="#" class="dot"></a>
                  <a href="#" class="dot"></a>
                  <a href="#" class="dot"></a>
                  <a href="#" class="dot"></a>
              </div>
              <div>
                  <a href="#" class="prev"></a>
              </div>
              <div>
                  <a href="#" class="next"></a>
              </div>
          </div>
    </div>

CSS

.banner{
    position: relative;
    height: 460px;
} 
.banner li{
    position: absolute;
    opacity: 0;
    transition: opacity 800ms;
}
.banner li.no-trans{
    opacity: 1;
    /*让第一张图片设为不透明，避免刷新页面时多余的过渡*/
    /*需要提高该选择器的优先级*/
}
.banner img{
    width: 100%;
}
.dot-wrapper{
    width: 80px;
    height: 10px;
    bottom: 22px;
    right: 35px;
    position: absolute;
}
.dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .4);
    border: 2px rgba(255, 255, 255, .4) solid;
    margin-left: 6px;
    float: left;
}
.active{
    border-color: rgba(0, 0, 0, .4);
    background-color:rgba(255, 255, 255, .4);    
}
.dot:hover{
    border-color: rgba(0, 0, 0, .4);
    background-color:rgba(255, 255, 255, .4);
}
.prev,.next{
    display: block;
    position: absolute;
    width: 41px;
    height: 69px;
    background-image: url(../img/icon-slides.png);
    top: 184px;
}
.prev{
    left: 233px;
    background-position: -83px;
}
.prev:hover{
    background-position: 0px;
}
.next{
    right: 0;
    background-position: -124px;
}
.next:hover{
    background-position: -41px;
}

JS

window.onload = function(){
    let prev = document.getElementsByClassName("prev")[0];
    let next = document.getElementsByClassName("next")[0];
    let imgs = document.getElementsByClassName("banner-img");
    let dots = document.getElementsByClassName("dot");
    let index = 0;
    imgs[index].style.opacity = 1;
    dots[index].className = "dot active"
    prev.onclick = function(){
        index--;
        if(index >= 0){
            imgs[index].style.opacity = 1;
            imgs[index + 1].style.opacity = 0;
            dots[index].className = "dot active";
            dots[index + 1].className = "dot";]
        else{
            index = imgs.length - 1;
            imgs[index].style.opacity = 1;
            imgs[0].style.opacity = 0;
            dots[0].className = "dot";
            dots[dots.length - 1].className = "dot active";
        }
        clearInterval(timer);
        timer = autoRun();

    }
    next.onclick = function(){
        index++;
        if(index < imgs.length){
            imgs[index - 1].style.opacity = 0;
            imgs[index].style.opacity = 1;
            dots[index].className = "dot active";
            dots[index - 1].className = "dot";
        }
        else{
            index = 0;
            imgs[imgs.length - 1].style.opacity = 0;
            imgs[index].style.opacity = 1;
            dots[dots.length - 1].className = "dot";
            dots[0].className = "dot active";
        }
        clearInterval(timer);
        timer = autoRun();
    }
    for(let i = 0; i < dots.length; i++){
        dots[i].onclick = function(){
            imgs[index].style.opacity = 0;
            dots[index].className = "dot";
            imgs[i].style.opacity = 1;
            dots[i].className = "dot active";
            index = i;
            clearInterval(timer);
            timer = autoRun();
        }
    }
    function autoRun(){
        let timer = setInterval(function(){
            index++;
            if(index < imgs.length){
                imgs[index - 1].style.opacity = 0;
                imgs[index].style.opacity = 1;
                dots[index].className = "dot active";
                dots[index - 1].className = "dot";
            }
            else{
                index = 0;
                imgs[imgs.length - 1].style.opacity = 0;
                imgs[index].style.opacity = 1;
                dots[dots.length - 1].className = "dot";
                dots[0].className = "dot active";
            }
        },5000);
        return timer;
    }
    let timer = autoRun();
}

Version2基本上就能还原小米官网的轮播图了

如果有帮助的话，请帮我Star一下→谢谢大佬动动手指

DanmoSAMA
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 过渡实现轮播图效果
08-31
本篇文章主要介绍了Vue 过渡实现轮播图效果，Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。有需要的小伙伴可以参考下。
轮播图：小米官网同款轮播图，拿走它让你的网页酷酷的～
余光的博客
07-22 7466
第一点、JavaScript Array 对象 Array 对象用于在单个的变量中存储多个值。 创建 Array 对象的语法： 1.new Array(); 2.new Array(size); 3.new Array(element0, element1, …, elementn); 参数 1.参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 s...
原生JS实现过渡效果的轮播图
TomHe789
06-27 2563
说明 刚开始是打算使用jQuery中的fadeIn和fadeOut方法来完成这种带有渐变效果的轮播图的，由于好长时间没有碰jQuery （实力不允许???? ） ，所以在用jQuery尝试了一下并且失败了之后，就打算使用原生的JavaScript来完成了。 实现原理 我首先在CSS中定义好了两个类，一个类是用于实现轮播时动画消失的效果，另一个类则是用于实现轮播时动画出现的效果；然后用到了JavaScript中关于类的基本的两个方法：add()和remove()；通过这两个来完成对类的增删，从而展现出轮播的
前端项目实战（三）：制作小米官网轮播图
一点一滴铺就人生
07-14 2731
一、实现效果 本轮播图是仿照小米官网制作！ 二、实现代码 1、html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id
js无缝轮播图，有过渡效果（详细解析）
qq_59599812的博客
02-20 1248
此时需要注意，需要在判断中用到setTimeout延时器，过渡效果有几秒，延时器也要写几秒。因为有过渡效果，不然会有问题，要把过渡清除，设置延时器是把延时器的时间当做过渡去使用。1.无缝轮播思路：复制轮播图第一张到最后一张，当轮播图到最后一张时，需要判断，到第一张。
html+css制作静态小米商城页面（含css手动轮播图）
我也是全粘工程师啦
07-01 9261
html,css制作静态小米商城网页，纯css实现轮播图，含代码注释
12种炫酷CSS3图片切换过渡效果
12-29
12种炫酷CSS3图片切换过渡效果
基于SVG图像变形过渡轮播图.zip
07-11
基于SVG图像变形过渡轮播图是一款在图片切换时，通过SVG路径变形技术，制作各种图形的过渡动画效果。
行业文档-设计装置-承载力过渡式铁轨对接器.zip
08-26
行业文档-设计装置-承载力过渡式铁轨对接器.zip
HTML5焦点图片波浪过渡效果切换动画特效
06-09
这是一款html5结合svg制作图片波浪动画切换代码，网页焦点图片波浪过渡效果切换动画特效。
小米官网轮播图.zip
02-27
使用JavaScript写的小米官网轮播图！使用的jquery结合原生JavaScript写的一个可以移植到不同需求的场景使用的轮播图
jquery轮播图-小米官网效果
03-26
jquery轮播图-小米官网效果，网络上看到的，觉得不错就上传出来，供大家一起共同分享学习。
响应式官网，头尾和轮播图
01-09
引入头部尾部的代码片段，通过@media媒体查询规定banner大小
JavaScript制作网页中的轮播图(带有过渡效果)源码解析
Etui۹(･༥･´)و的博客
04-13 839
注：本练习主要以效果图和源码解析的方式介绍，如有疑问可参考尚硅谷李立超老师的JS基础教程(https://www.bilibili.com/video/BV1YW411T7GX?p=136); 效果图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210413203106801.gif 源码解析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
Vue实现带两个方向过渡效果的轮播图
hans774882968的博客
08-27 852
网上有许多轮播图案例，但只有极少数做了两个方向的滑动过渡效果。而我就是其中一个！所以来关注hans774882968，看技术干货！ 先看效果图 HTML <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>轮播图图片切换</title> <link rel=
原生JS实现透明度轮播效果
旅行中的伊蕾娜的博客
07-03 327
js实现透明度轮播效果 以透明度变换的方式切换轮播图，具有自动轮播、点击左右按钮切换、点击下方圆点切换功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="animation.js"></script> <style type="
js写一个小米首页轮播图
qq_43378240的博客
01-08 702
效果如图 图片的切换有过渡效果 有小圆点和按钮点击切换 有鼠标放置停止轮播 左边的按钮已经预留了小米官网的左侧列表空间 所以 css <style> *{margin:0;padding:0;} li{list-style:none;} .box{ width:1226px; height:460px; /* background:red; */ margin:0 auto; position: relative; } .i
过渡式轮播图
lbs311709000127的博客
02-10 1313
效果图：（制作不易，多谢支持） 寒假里因为新型肺炎的事情不敢出门，虽然整天呆在家里，但我感觉也并不是那么无聊，可能我真的比较宅吧，话说回来这么长时间什么也不干也不太好，所以就利用这宝贵的时间学点知识。其实在还没放假的时候就已经做好了好好学习的打算，到今天也差不多坚持了快一个月了，虽然上午基本上是用睡觉度过的，但感觉通过这些天的学习还是收获了许多。 今天这个案例是做轮播图，其实早就想做这个...
CSS伪类实现加号
CaseyWei
11-15 891
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
过渡效果轮播图
最新发布
05-30
过渡效果轮播图可以使用CSS3的transition或者animation来实现，也可以使用JavaScript来控制图片的切换和过渡效果。下面是一个使用CSS3实现的例子： HTML代码： ``` ``` CSS代码： ``` .slider { width:...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值