前端项目实战（三）：制作小米官网轮播图

最新推荐文章于 2023-08-03 11:27:17 发布

凤求凰的博客

最新推荐文章于 2023-08-03 11:27:17 发布

阅读量3.6k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： # 前端 # 项目实战文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44571270/article/details/107329373

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

项目实战

10 篇文章

订阅专栏

本文详细介绍了一款仿小米官网的轮播图实现方法，涵盖定时轮播、鼠标交互、左右滑动、圆点导航及防快速点击等功能，通过HTML、CSS和JS代码实现了平滑的轮播效果。

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

下面是小凰凰的简介，看下吧！
💗人生态度：珍惜时间，渴望学习，热爱音乐，把握命运，享受生活
💗学习技能：网络 -> 云计算运维 -> python全栈( 当前正在学习中)
💗您的点赞、收藏、关注是对博主创作的最大鼓励，在此谢过！
有相关技能问题可以写在下方评论区，我们一起学习，一起进步。
后期会不断更新python全栈学习笔记，秉着质量博文为原则，写好每一篇博文。

文章目录

一、实现效果

本轮播图是仿照小米官网制作！
由于图片大小上传限制，因此我把轮播速度调的比较快。注意动图中我的鼠标的位置！

1、定时轮播功能

在这里插入图片描述

2、鼠标放上去取消定时轮播

在这里插入图片描述

3、左右滑动轮播效果

在这里插入图片描述

4、点击圆点轮播效果及点击圆点之后，还能实现mouseenter、leave事件

在这里插入图片描述

5、防止用户过快点击左右箭头轮播的防止手段

    let isclick = false; //最开始的状态，未被点击
    $('.arrow_right').click(function () {
        if (!isclick) {
            isclick = true; //置为true，表示当前已经被点击，后面来的多次点击就会被阻挡在if判断
            //执行操作
            let number = parseInt($(this).attr('num')) + 1;
            if (number > 4) {
                number = 0;
            }
            change_back(number);
            
            // 事件执行完之后，应该重新isclick置为false
            // 但由于动画效果播放需要一定时间，设置定时器，700ms之后isclick置为false
            setTimeout(function () {
                isclick = false;
            },700);
        }
    })
    $('.arrow_left').click(function () {
        if (!isclick) {
            isclick=true;
            let number = parseInt($(this).attr('num'))-1;
            if(number < 0){
                number = 4;
            }
            change_back(number);
            setTimeout(function () {
                isclick = false;
            },700);
        }
    })

二、项目目录一览

在这里插入图片描述

三、实现代码

1、html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div id="rotation">
        <img src="5.png">
        <img src="4.png">
        <img src="3.png ">
        <img src="2.png">
        <img src="1.png">
        <div class="arrow_left iconfont icon-arrow_left" num="0"></div>
        <div class="arrow_right iconfont icon-arrow_right" num="0"></div>
        <div id="dot_area">
            <ul id="dot_ul">
                <li class="dot_li" flag="false" num="0" check="true"></li>
                <li class="dot_li" flag="false" num="1"></li>
                <li class="dot_li" flag="false" num="2"></li>
                <li class="dot_li" flag="false" num="3"></li>
                <li class="dot_li" flag="false" num="4"></li>
            </ul>
        </div>
    </div>
</body>
<script src="jquery-3.5.1.js"></script>
<script src="index.js"></script>
</html>

2、css代码

/* style.css文件 */
body{
    margin: 0px;
    position: fixed;
}
#rotation{
    width: 990px;
    height: 460px;
    position: fixed;
    left: 261px;
    top: 98px;
    overflow: hidden;
}
#dot_area{
    height: 9px;
    padding: 0px;
    position: absolute;
    bottom: 45px;
    right: 34px;
    cursor: default; /* 规定在这个区域里的鼠标是个指针形状 */
}
img{
    position: absolute;
    right: -30px;
}
#dot_ul{
    list-style: none;
}
.dot_li{
    width: 5px;
    height: 5px;
    margin-right: 3px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid #939393;
    background-color: #5c8382;
    cursor: pointer;
}
.arrow_left,.arrow_right{
    height: 68px;
    width: 41px;
    line-height: 68px; /* 设置行高等于div的高度 */
    text-align: center; /* 当行高等于div的高度，这里就成了内容在div中居中，一个div只有一行嘛！*/
    color: white;
    opacity: 0.5;
    cursor: pointer;
}
.arrow_left{
    position: absolute;
    top: 195px;
}
.arrow_right{
    position: absolute;
    right: 0px;
    top: 195px;
}
li[check='true']{
    background-color: white;
}

/* iconfont.css文件 */
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1594990870473'); /* IE9 */
  src: url('iconfont.eot?t=1594990870473#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK8AAsAAAAABqwAAAJwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqBEIEQATYCJAMMCwgABCAFhG0HQhvaBciemjwpUW0YY8PPR7wNIxAgHv7br903M7uOaFNPRNHTSSSTRAlUEsS2hMbpdM/kf7WmG0CjbnwKCArtU/Yu93Q/+xtyBRpPRqAwFS6tkDi+uu2HIOF3n64UIykavQiFj0oq/32ey+ndVZYFMj9Qjmuv50e9AEsDCmisTZGVSILeMHaBSzhOoG1STeZ4ffcAygprXCAetXKgnAsrCss1hXrN0iJe1TTTc3oDXsLvx5/hKJPUMmvqycNaHRY/zz8v8nH15MwnRAhwdQ0Z60AhTmvTJ3KCcXLa6bx5sK9+wedFVfF57v/jCQVJEHVWdRcsI1W6I4krTjUXUHrHlRnU6yvNApss9qhrQwwNBVi/qbekHtrk3dxyqe77D9STgOLtVjn5r426vMq19PIczh96yl7aGn5KeKENUL2lswBVL/xFBsF7HP8W2//lTgEfEyEIVb0C/Ss0JZjkV0l61hVdZllyUcWu2PRmQz2cCVjTRsXyD/scrx+7JWdo5mQjvA0TGrKmebKw1lHTsYW6pj20rdlY3TGC5ERpYdUFQBj0gqRfD9mgd7KwPlAz7hd1g5FD22mMbNmxGLp6ROgw1oXbFdozsXRsXI1q91A1Q4eyspB7hJTqmBjqHyzmNjBGmmNG2lLDzFJIMpFYB6dhGBqRkPHR4/4GczI9MCDr3tTvmQiqjhDkYKhOcHUJmseISb85q5Y+vwcpTSEHtdBqokcQSenOhSH9BnuQG+q4F+1eXkm1KMMYkwSJGBFhHQxCoZAhJPWDfMjD+jVGJBPTBuxGsq+6f31t9H3boM06LkeKHEXnmsi0LdKqwdW0JETJAA==') format('woff2'),
  url('iconfont.woff?t=1594990870473') format('woff'),
  url('iconfont.ttf?t=1594990870473') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1594990870473#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 31px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow_right:before {
  content: "\e685";
}

.icon-arrow_left:before {
  content: "\e684";
}

3、js代码

// index.js文件
$(function () {
$(function () {
    let t1 = setInterval(timer_back,3000); // 定时更换背景图片
    $('#rotation').mouseenter(function () {
        clearInterval(t1);
    })
    $('#rotation').mouseleave(function () {
        t1 = setInterval(timer_back,3000);
    })
    $('.dot_li').mouseenter(function () {
        $(this).css({'backgroundColor':'white'});
    })
    $('.dot_li').mouseleave(function () {
        if ($(this).attr('flag') !== 'true'){
            $(this).css({'backgroundColor':'#5c8382'});
        }
    })
    $('.dot_li').click(function () {
        $(this).attr({'flag':'true'});
        let number = parseInt($(this).attr('num'));
        change_back(number);
    })
    $('.arrow_left,.arrow_right').mouseenter(function () {
        $(this).css({'backgroundColor':'#727374'});
        $(this).animate({'opacity':'1'},'slow');
    })
    $('.arrow_left,.arrow_right').mouseleave(function () {
        $(this).css({'backgroundColor':'transparent'});
        $(this).animate({'opacity':'0.5'},'slow');
    })
    let isclick = false;
    $('.arrow_right').click(function () {
        if (!isclick) {
            isclick = true;
            let number = parseInt($(this).attr('num')) + 1;
            if (number > 4) {
                number = 0;
            }
            change_back(number);
            setTimeout(function () {
                isclick = false;
            },700);
        }
    })
    $('.arrow_left').click(function () {
        if (!isclick) {
            isclick=true;
            let number = parseInt($(this).attr('num'))-1;
            if(number < 0){
                number = 4;
            }
            change_back(number);
            setTimeout(function () {
                isclick = false;
            },700);
        }
    })
    function change_back(number) {
        // 为了背景图淡入淡出效果，我们必须图片重叠放置
        // 图片重叠放置，会造成第一张图片的img标签的index其实是最大的，为4！最后一张图片，index为0！
        // 因此下面循环是4-number，而不是number
        for (let i = 4;i > 4-number;i--){
            $('img').eq(i).animate({'opacity':0},'slow');
        }
        // img标签的index和number不一样，需要4-number
        $('img').eq(4-number).animate({'opacity':1},'slow');
        // li标签和number的顺序是一致的，因此可以直接填写number
        $('li').eq(number).css({'backgroundColor':'white'});
        $('li').eq(number).siblings().css({'backgroundColor':'#5c8382'}).attr({'flag':'false'});
        $('.arrow_right,.arrow_left').attr({'num':number});
    }
    // 更换背景图片方法
    function timer_back(){
        let nums = parseInt($('#rotation').children().eq(6).attr('num'))+1;
        if(nums > 4){
            nums = 0;
        }
        change_back(nums);
    }
})