使用jQuery来实现淘宝首页轮播图的效果

一.实现这一效果最主要的几个要求点

轮播图的五张图片要求每隔3秒自动轮播一次
当鼠标移入时，轮播效果会停止，当鼠标移出时又会继续轮换播放
图片的两侧会有两个方向按钮，当点击按钮时图片会随之对应的方向切换
轮播图的下方会有五个白点，代表五张图片；当图片切换时对应的白点会随之亮起，当点击白点时也会切换到对应的图片

实现了这五个要求也就能实现淘宝首页轮播图的效果了。

好了下面直接上代码，里边会有一些注释：

1.首先是设置图片、箭头、小白点等元素

<div class="wrapper">
        <div class="box">
            <span class="left">&lt;</span>  <!--左右箭头-->
            <span class="right">&gt;</span>
            <ul class="img-list">
                <li><img src="./imags/01.jpg" alt=""></li>
                <li><img src="./imags/02.jpg" alt=""></li>
                <li> <img src="./imags/03.jpg" alt=""></li>
                <li><img src="./imags/04.jpg" alt=""></li>
                <li><img src="./imags/05.jpg" alt=""></li> 
                <li><img src="./imags/01.jpg" alt=""></li>                                                                             
            </ul>
            <div class="dot">
                <ul class="dot-list">
                    <li class="item active" ></li>
                    <li class="item"></li>
                    <li class="item"></li>
                    <li class="item"></li>
                    <li class="item"></li>
                </ul>    
            </div>
        </div>       
    </div>

2.接下来设置元素的CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrapper{
            width: 520px;
            margin: 50px auto 0;   /*水平居中*/
            font-size: 0;
        }
        .box{
            position: relative;  /*相对定位*/
            width: 520px;
            height: 280px;
            overflow: hidden;   /*超出隐藏*/
        }
        .box .img-list{
            position: absolute;   /*绝对定位*/
            top: 0px;
            left: 0px;
            width: 3120px;
            height: 280px;
        }
        .box .img-list li{
            display: inline-block;
            width: 520px;
            height: 280px;
        }
        .box .img-list img {
            width: 520px;
        }
        .wrapper .box span{
            position: absolute;
            display: inline-block;   /* 不独占一行的块级元素*/
            top: 50%;
            margin-top: -25px;
            width: 30px;
            height: 50px;
            line-height: 47px;
            text-align: center;
            cursor: pointer;    /*设置鼠标图形   手*/
            font-size: 18px;
            background-color: rgba(0, 0,0, 0.5);  /*50%透明度的  纯黑色*/
            color: #fff;
            z-index: 999;   /*堆叠元素   意思就是元素、图片可以重叠*/
            user-select: none;  /*元素不可被选中*/

        }
        .wrapper .box .left {
            left: 0;
            border-radius: 0 10px 10px 0;   /*元素的外边框圆角*/
        }
        .wrapper .box .right {
            right: 0;
            border-radius: 10px 0 0 10px;
        }
        .box .dot {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }
        .dot .dot-list{
            display: inline-block;
            background-color: rgba(0, 0,0, 0.5);
            border-radius: 10px;
        }
        .dot-list .item {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin: 2px;
            cursor: pointer;   /*设置鼠标图形   手*/
        }
        .dot-list .active {
            background-color: #ff6700;
        }

    </style>
</head>

3.设置效果展示的函数，使这些元素能够进行轮播效果以及点击事件

注意在设置函数之前一定要载入jQuery代码工具包，这里边已经有成熟精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

<script src="./jquery-3.5.0.min.js"></script>
    <script>
        //设置比较索引的值
        var minNum = 0;
        var maxNum = 5;
        //刚开始索引为0
        var index = 0;
        //设置一个计时器为空
        var counter = null;
        //设置最小移动距离为520，因为每张图片宽度都为520px
        var limWidth = 520;

        //设置自动轮播函数
        function autoMove(){
            //如果计时器不为空的话就跳出，计时器为空，说明当前有计时器再跑
            if(counter != null){
                return;
            }
            //如果计时器为空，则开启一个每3秒执行一次的autoPlay的函数
            counter = setInterval(autoPlay, 3000);
        }
        // 自动轮播函数，就是向函数cliMove传递参数right，就好比，一个人每3秒点击一次右边的小按钮，不过这个由电脑去执行
        function autoPlay(){
            cliMove('right');
        }
        // 执行函数，传递形参，代表方向
        function cliMove(direction){
            //因为在这里涉及到整个ul宽度的变化动画效果，stop()函数有两个参数，涉及到jQuery动画，
            //第一个参数意思是，是否还要保留动画队列，false不保留，true保留。
            //第二个参数意思是，是否立即执行完当前的动画，true是，false不是，那这边选择true的原因是我需要你立即响应当前用户的操作，防止用户快速点击左右按钮，移开鼠标，而动画却还在移动。
            //这边第一个参数填false或者true，已经影响不了什么了，因为当前动画立即执行，动画队列肯定是没有了，所有第一个参数填false或者true，已经不打紧了
            $('.img-list').stop(false,true);
            //如果用户点击的是右边的按钮
            if(direction =="right"){
                //那么索引值加1，每点击一次在原有基础上加一
                index++;
                //如果索引值大于5了
                if(index > 5){
                    // 意味着用户浏览到第六张了，而这边第六张正是第一张，为了实现无缝连接，看着只有5张，实际上头尾两张是一样的，所以有六张
                    // 那么将ul的left设置为0，又回到了第一张，注意这边是迅速移动到第一张，因为用了css属性，而不是animate移动动画
                    $('img-list').css({
                        left:0
                    })
                    //同时将索引值设置为1，注意这边的1为第二张，在大多数编程语言中，数组都是从0开始，JS也是一样的
                    index = 1;
                }
            }
            //如果用户点击的是左边按钮
            else if(direction =="left"){
                //那么索引值减一
                index--;
                //如果索引值小于0，同上，迅速移动到第六张
                if(index < 0){
                    $('.img-list').css({
                        left:maxNum * -limWidth
                    })
                    //同时索引值变为4，意味着变为第五张
                    index = 4;
                }
            }
            // 每次index变换时小原点的背景也跟着变换,与图片一一对应,
            //但是图片一共是6张,小原点就5个,所有这边进行判断,如果index大于4的话就返回0即代表着第一个小原点,否则的话图片就随着index变化而变化
            //三目运算符
            dotMove($('.item').eq(index > 4 ? 0 : index));
            // 不管点击的是左边的还是右边的，最后结果都是要执行这句话的，这步是动画移动的关键，
            // ul的left值设为当前索引与每张图片最小宽度的乘积，这边的负值是意味着，这个ul定位相对于父级left的负值
            $('.img-list').animate({
                left: index * -limWidth
            });
        }

        //绑定ul父级的鼠标进入，离开事件，jQuery链式调用，
        //如果鼠标进入，那么清空当前自动轮播的计时器，如果鼠标离开，那么重新执行自动轮播的函数
        $('.box').mouseenter(function(){
            clearInterval(counter);
            counter = null;
        }).mouseleave(function(){
            autoMove();
        })

        //绑定点击事件，如果点击了右边按钮，触发cliMove函数，传入right，图片就会跟你按的次数，进行移动播放
        $('.right').click(function(){
            cliMove('right');
        })
        $('.left').click(function(){
            cliMove('left');
        })

        //绑定下面小圆点事件，如果点击其中任意一个，获取当前小圆点的索引，并且赋值给index，
        //并且执行函数cliMove，不传入参数，因为此时，希望图片与小原点一一对应
        $('.item').click(function () {
            index = $(this).index();
            cliMove('');
        })

        //点击小原点后将会触发cliMove函数，并且在这个函数中，执行了dotMove，移除当前小原点的CSS样式，
        //向dotMove函数传入当前点击的小原点所在的位置，并且设置其CSS样式，即点击的小原点背景变为橘黄色
        function dotMove(dom){
            $('.active').removeClass('.active');
            dom.addClass('active');
        }

        //当页面刷新，先执行自动轮播的函数，这时候图片就会自己轮播了
        autoMove();
    </script>

这样淘宝首页的轮播效果图就做出来了，这只是很生硬的做出了效果图，体验感其实并不好，还有一些瑕疵。希望大神看都后能够提一些完善修改的意见。

转载自：https://blog.csdn.net/weixin_44103733/article/details/88857695

使用jQuery来实现淘宝首页轮播图的效果

猜你喜欢