1. 技术文章
  2. 前端学习(四)-轮播图案例

前端学习(四)-轮播图案例

由 感情迁移 提交于 2020-03-04 19:05:24

文章目录

前言

上篇文章：前端学习(三)-jQuery函数库
上篇文章简单的介绍了下jQuery函数库的功能，本篇文章将上篇学到的内容应用到实际的开发当中，通过轮播图案例来熟悉jQuery。

导入jQuery函数库

有两种方法获取jQuery函数库，可以将jQuery下载到本地再通过script导入，或者在网络允许的情况下直接使用url导入。
jQuery常用下载地址：http://www.jq22.com/jquery-info122

/*两种使用其中一种即可，第一种是通过url跨域引入包，第二种是下载到本地后引入本地包*/
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="jquery/jquery.min.js"></script>

轮播图

需求分析

  • 一个轮播图的窗口，实现图片的自动轮播。
  • 当鼠标进入轮播图窗口时，自动轮播停止，鼠标移除后恢复。
  • 可以通过左右按钮控制图片播放。
  • 窗口下方有悬浮条提示图片轮播到第几张，同时可以通过点击小球切换图片。

实现

首先预先下载好jquery.js包和五张图片，这里我们将样式css和页面html分为两个不同的文件，方便开发。

css

/*去除默认边距*/
*{
    margin: 0;
    padding: 0;
}
/*对图片进行缩放*/
img{
    width: 600px;
    height: 400px;
}
/*定位 子绝父相*/
div{
    position: relative;
    width: 600px;
    height: 400px;
    border: 1px solid black;
    /*外边距50px 并且居中*/
    margin: 50px auto;
    /*超过范围的隐藏*/
    overflow: hidden;
}
ol{
    /*去除list样式*/
    list-style: none;
}
ol li{
    /*相对div进行偏移*/
    position: absolute;
    left: 600px;
}
.cur{
    /*相对div偏移*/
    position: absolute;
    left: 0px;
}

.lbt{
    /*相对div偏移*/
    position: absolute;
    left: 0px;
    top: 50%;
    width: 25px;
    height: 25px;
}
.rbt{
    /*相对div偏移*/
    position: absolute;
    right: 0px;
    top: 50%;
    width: 25px;
    height: 25px;
}
ul{
    /*相对div偏移*/
    position: absolute;
    left: 35%;
    bottom: 10px;
    /*去除list样式*/
    list-style: none;
    height: 25px;
    width: 150px;
}
ul li{
    /*打破文档流，向左浮动*/
    float: left;
    height: 25px;
    width: 25px;
    margin-left: 5px;
    border-radius: 50%;
    /*文字居中*/
    text-align: center;
    background-color: aqua;
    /*设置行高使文字居中*/
    line-height: 25px;
    /*修改鼠标样式*/
    cursor: pointer;
}
.idx{
    background-color: red;
    /*放大1.2倍*/
    transform: scale(1.2);
}

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<!--    引入css样式-->
    <link rel="stylesheet" type="text/css" href="css/default.css" />
<!--    引入jq包-->
    <script src="jquery/jquery.min.js"></script>
</head>
<body>
    <div>
        <ol>
            <li class="cur"><img src="img/1.jpg"></li>
            <li><img src="img/2.jpeg"></li>
            <li><img src="img/3.jpeg"></li>
            <li><img src="img/4.jpeg"></li>
            <li><img src="img/5.jpeg"></li>
        </ol>
        <button class="lbt">&lt;</button>
        <button class="rbt">&gt;</button>
        <ul>
            <li class="idx">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
</html>
<script>
    //初始索引为0，从图片1开始轮播
    var index = 0;
    //功能：将当前图片向右移出窗口，将上一张图片从左到右移入窗口
    function lbtClick() {
        //eq(n)获取到ol li的第n+1个标签
        //css设置样式
        //stop(true)防止动画积累，如果当前有动画在执行的触发，则停止当前动画，开始执行新的动画。
        //animate({xxx},time)，在time(单位ms)时间内，将样式变为{xxx}样式
        $("ol li").eq(index).css({
            "left" : 0
        }).stop(true).animate({
            "left" : 600
        },500);
        index--;
        index = index < 0 ? 4:index;
        $("ol li").eq(index).css({
            "left" : -600
        }).stop(true).animate({
            "left" : 0
        },500);
        //向新的ul li标签添加class"idx"，改变其大小和颜色，同时移除其兄弟节点的class
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    };
    //功能：将当前图片向左移出窗口，将下一张图片从右到左移入窗口
    function rbtClick() {
        $("ol li").eq(index).css({
            "left" : 0
        }).stop().animate({
            "left" : -600
        },500);
        index++;
        index = index > 4 ? 0:index;
        $("ol li").eq(index).css({
            "left" : 600
        }).stop(true).animate({
            "left" : 0
        },500);
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    }
    //为button绑定事件
    $(".lbt").click(lbtClick);
    $(".rbt").click(rbtClick);
    //设置定时任务
    var timer = setInterval(rbtClick,2000);
    //设置鼠标移入事件
    $("div").mouseenter(function () {
        //清理定时器，使定时器不再起作用
        clearInterval(timer);
    });
    //鼠标移除事件
    $("div").mouseleave(function () {
        //重新生成定时器
        timer = setInterval(rbtClick,2000);
    });
    //下方悬浮条鼠标点击事件
    $("ul li").click(function () {
        //this为鼠标点击的标签
        var current = $(this).index();
        if (current > index){
            $("ol li").eq(index).css({
                "left" : 0
            }).stop().animate({
                "left" : -600
            },500);
            index = current;
            $("ol li").eq(index).css({
                "left" : 600
            }).stop(true).animate({
                "left" : 0
            },500);
        }else if(current < index){
            $("ol li").eq(index).css({
                "left" : 0
            }).stop().animate({
                "left" : 600
            },500);
            index = current;
            $("ol li").eq(index).css({
                "left" : -600
            }).stop(true).animate({
                "left" : 0
            },500);
        };
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    });
</script>

开发流程

html框架开发

首先明确我们需要的组件，div窗体，轮播的list图片，左按钮和右按钮，悬浮条list。
先编写body框架，图片为网上随便找的素材，class"cur"为初始化时默认的图片，class"idx"为默认下标。

<body>
    <div>
        <ol>
            <li class="cur"><img src="img/1.jpg"></li>
            <li><img src="img/2.jpeg"></li>
            <li><img src="img/3.jpeg"></li>
            <li><img src="img/4.jpeg"></li>
            <li><img src="img/5.jpeg"></li>
        </ol>
        <button class="lbt">&lt;</button>
        <button class="rbt">&gt;</button>
        <ul>
            <li class="idx">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>

样式开发

框架编写后，在页面运行可以看到一个毫无样式的文档流网页，这时候我们要对整个body的样式进行编写， 生成一个能看的静态页面。注意：外部样式别忘了用link标签导入。

/*去除默认边距*/
*{
    margin: 0;
    padding: 0;
}
/*对图片进行缩放*/
img{
    width: 600px;
    height: 400px;
}
/*定位 子绝父相*/
div{
    position: relative;
    width: 600px;
    height: 400px;
    border: 1px solid black;
    /*外边距50px 并且居中*/
    margin: 50px auto;
    /*超过范围的隐藏*/
    overflow: hidden;
}
ol{
    /*去除list样式*/
    list-style: none;
}
ol li{
    /*相对div进行偏移*/
    position: absolute;
    left: 600px;
}
.cur{
    /*相对div偏移*/
    position: absolute;
    left: 0px;
}

.lbt{
    /*相对div偏移*/
    position: absolute;
    left: 0px;
    top: 50%;
    width: 25px;
    height: 25px;
}
.rbt{
    /*相对div偏移*/
    position: absolute;
    right: 0px;
    top: 50%;
    width: 25px;
    height: 25px;
}
ul{
    /*相对div偏移*/
    position: absolute;
    left: 35%;
    bottom: 10px;
    /*去除list样式*/
    list-style: none;
    height: 25px;
    width: 150px;
}
ul li{
    /*打破文档流，向左浮动*/
    float: left;
    height: 25px;
    width: 25px;
    margin-left: 5px;
    border-radius: 50%;
    /*文字居中*/
    text-align: center;
    background-color: aqua;
    /*设置行高使文字居中*/
    line-height: 25px;
    /*修改鼠标样式*/
    cursor: pointer;
}
.idx{
    background-color: red;
    /*放大1.2倍*/
    transform: scale(1.2);
}

动态页面生成

我们已经完成了html框架和css样式的开发，得到了一个静态页面，现在我们想完成轮播图的动画功能，在html添加script标签，进行逻辑编写，注意使用jQuery一定要先引包。

    //初始索引为0，从图片1开始轮播
    var index = 0;
    //功能：将当前图片向右移出窗口，将上一张图片从左到右移入窗口
    function lbtClick() {
        //eq(n)获取到ol li的第n+1个标签
        //css设置样式
        //stop(true)防止动画积累，如果当前有动画在执行的触发，则停止当前动画，开始执行新的动画。
        //animate({xxx},time)，在time(单位ms)时间内，将样式变为{xxx}样式
        $("ol li").eq(index).css({
            "left" : 0
        }).stop(true).animate({
            "left" : 600
        },500);
        index--;
        index = index < 0 ? 4:index;
        $("ol li").eq(index).css({
            "left" : -600
        }).stop(true).animate({
            "left" : 0
        },500);
        //向新的ul li标签添加class"idx"，改变其大小和颜色，同时移除其兄弟节点的class
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    };
    //功能：将当前图片向左移出窗口，将下一张图片从右到左移入窗口
    function rbtClick() {
        $("ol li").eq(index).css({
            "left" : 0
        }).stop().animate({
            "left" : -600
        },500);
        index++;
        index = index > 4 ? 0:index;
        $("ol li").eq(index).css({
            "left" : 600
        }).stop(true).animate({
            "left" : 0
        },500);
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    }
    //为button绑定事件
    $(".lbt").click(lbtClick);
    $(".rbt").click(rbtClick);
    //设置定时任务
    var timer = setInterval(rbtClick,2000);
    //设置鼠标移入事件
    $("div").mouseenter(function () {
        //清理定时器，使定时器不再起作用
        clearInterval(timer);
    });
    //鼠标移除事件
    $("div").mouseleave(function () {
        //重新生成定时器
        timer = setInterval(rbtClick,2000);
    });
    //下方悬浮条鼠标点击事件
    $("ul li").click(function () {
        //this为鼠标点击的标签
        var current = $(this).index();
        if (current > index){
            $("ol li").eq(index).css({
                "left" : 0
            }).stop().animate({
                "left" : -600
            },500);
            index = current;
            $("ol li").eq(index).css({
                "left" : 600
            }).stop(true).animate({
                "left" : 0
            },500);
        }else if(current < index){
            $("ol li").eq(index).css({
                "left" : 0
            }).stop().animate({
                "left" : 600
            },500);
            index = current;
            $("ol li").eq(index).css({
                "left" : -600
            }).stop(true).animate({
                "left" : 0
            },500);
        };
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    });

总结

至此我们轮播图就完成了开发，将html、css、js的开发结合起来，同时引入了jQuery库，通过其提供的函数极大的方便了我们开发，这只是jQuery函数的一部分，接下来我们将通过另外一个导航条的案例深入学习和巩固jQuery。

标签
jquery
button样式
jquery动画
轮播
position
按钮
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!