利用jQuery实现图片轮播

最新推荐文章于 2024-03-14 19:48:19 发布

春雨惊春.

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量3.3k

点赞数 3

分类专栏：日常练习文章标签： javascript

本文链接：https://blog.csdn.net/qq_53979554/article/details/116446441

版权

日常练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

利用jQuery实现图片轮播

需求
实现步骤
示例

需求

在设置好html结构和css样式之后，利用jQuery实现轮播图效果。
初始结构和样式代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <!--清除浏览器默认样式-->
    <link rel="stylesheet" type="text/css" href="../重置样式表/reset.css"/>
    <style type="text/css">
        /*设置外部容器*/
        #container {
            /*外部容器刚好放下一个图片*/
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;/*相对定位*/
            margin: 20px auto;
        }

        /*设置图片容器*/
        #imgList {
            width: 4200px; /*7张图片的宽: 7*600 */
            height: 400px;
            position: absolute; /*绝对定位*/
            z-index: 1;

        }
        /*设置所有的图片<img>*/
        #imgList img {
            float: left;/*浮在左侧*/
        }

        /*设置所有小圆点容器<div>*/
        #pointsDiv {
            position: absolute;
            height: 12px;
            /*width: 100px;!*可以在js中设置*!*/
            z-index: 2;
            bottom: 20px;
            /*left: 250px;!*在js中设置居中*!*/
        }
        /*设置所有小圆点的样式*/
        #pointsDiv span {
            cursor: pointer;/*设置鼠标移动到元素边界范围内时显示的光标样式，pointer表示指示链接的指针（一只小手）*/
            float: left;
            border: 1px solid #fff;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #333;
            opacity: 0.7;
            margin: 0 3px;
        }

        /*设置第一个小圆点的默认样式*/
        #pointsDiv .on {
            background: orangered;
        }
        /*设置切换按钮*/
        .arrow {
            cursor: pointer;/*设置鼠标移动到元素边界范围内时显示的光标样式，pointer表示指示链接的指针（一只小手）*/
            display: none;
            line-height: 39px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            width: 40px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top: 180px;
            background-color: RGBA(0, 0, 0, 0.3);
            color: #fff;
            /*去除超链接下划线*/
            text-decoration: none;
        }
        /*鼠标移到切换按钮上时*/
        .arrow:hover {
            background-color: RGBA(0, 0, 0, 0.7);
        }
        /*鼠标移到整个div区域时使切换按钮显示*/
        #container:hover .arrow {
            display: block;/*显示*/
        }
        /*上一个切换图标的左外边距*/
        #prev {
            left: 20px;
        }
        /*下一个切换图标的右外边距*/
        #next {
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="imgList" style="left: -600px">
            <img src="img/1.jpg" alt="1" />
            <img src="img/2.jpg" alt="2" />
            <img src="img/3.jpg" alt="3" />
            <img src="img/4.jpg" alt="4" />
            <img src="img/5.jpg" alt="5" />
        </div>
        <div id="pointsDiv">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>

</body>
</html>

实现步骤

首先，需要引入jQuery文件，此次练习可以分为六个主要步骤：

一、获取相关对象

获取外部容器container
获取图片容器imgList
获取小圆点容器pointsDiv
获取所有小圆点集合points
获取前后切换按钮prev和next

二、设置切换按钮

首先我们需要定义每次翻页时图片容器需要移动的偏移量，常量PAGE_WIDTH，等于每个图片的宽度。
定义每次动画执行的总时间time和动画的每帧移动的单位时间itemTime，得到总帧数。
定义动画执行的标识变量isMoving，用于判断动画是否正在执行，初始值为false。
创建图片切换函数nextPage，形参为布尔值next。
在函数开始时，根据isMoving的值判断当前是否正在执行图片切换，如果正在执行，就直接return退出当次函数调用，如果没有执行，则修改isMoving为true。
定义图片容器需要移动的总偏移量offset，总偏移量根据函数的实参判断向前切换图片还是向后切换，向前为正的PAGE_WIDTH，向后为负的PAGE_WIDTH，总偏移量/总帧数=单位偏移量itemOffset
获取当前图片容器的left值，等到图片容器移动的目标位置，targetLeft=left+offset
创建定时器，在定时器中修改图片容器的left值，left+=itemOffset
判断是否到达目标位置，left==targetLeft，如果到达目标位置，关闭定时器，标志着动画执行完毕，此时再改回isMoving的值为false
如果没有到达目标位置，在单位时间内移动图片容器
在按钮的click时间回调函数中调用nextPage()函数

三、设置图片首尾相接效果

为实现首尾相接的效果，在第一张图片前添加第五张图片，在第五张图片后添加第一张图片，且将图片容器的初始化left值设置为-600px，修改图片容器的宽度
修改页面切换函数nextPage()，在每一次图片切换动画完成后，判断是否已经到达第一张/最后一张图片。left0或left-600*(真正的图片个数+1)，真正的图片个数=小圆点个数
在移动到（假的）第一张/最后一张图片的动画完成后，瞬间修改图片容器的left值，使其修正到真正的第一张/最后一张图片。left=-600或left=-600*真正的图片个数

四、随图片切换更新小圆点

定义前一个显示的小圆点的索引oldIndex，初始值默认为0
创建updatePoint()函数用于更新小圆点，参数为布尔值，并在页面切换的函数中调用。
计算当前应该显示的小圆点的索引值。
判断当前小圆点索引值是否越界（index>小圆点数量-1或index<0），相应修改index为正确的值。
移除前一个显示的小圆点的class属性值“on”
为当前应该显示的小圆点添加class属性值“on”
更新oldIndex的值

五、点击小圆点切换图片

修改nextPage()函数，根据形参类型判断总偏移量offset的值，如果参数是布尔值，原offset不变，如果参数是数值，offset=-PAGE_WIDTH*（当前索引值-前一个显示的小圆点的索引值）。
修改小圆点更新函数updatePoint()，根据形参判断当前应该显示的小圆点的索引值index，如果参数是布尔值，原index值不变，如果是数值，是index=当前点击的小圆点的索引值。
在小圆点的click事件的回调函数中调用nextPage()函数，传入当前小圆点的索引值。

六、鼠标无操作时图片自动轮播

创建定时器，在定时器的回调函数中调用页面切换函数naxtPage()，传入参数true。
为外部容器绑定hover事件，鼠标移入时，关闭自动翻页定时器，鼠标移出时开启自动翻页定时器。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <!--清除浏览器默认样式-->
    <link rel="stylesheet" type="text/css" href="../重置样式表/reset.css"/>
    <style type="text/css">
        /*设置外部容器*/
        #container {
            /*外部容器刚好放下一个图片*/
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;/*相对定位*/
            margin: 20px auto;
        }

        /*设置图片容器*/
        #imgList {
            width: 4200px; /*7张图片的宽: 7*600 */
            height: 400px;
            position: absolute; /*绝对定位*/
            z-index: 1;

        }
        /*设置所有的图片<img>*/
        #imgList img {
            float: left;/*浮在左侧*/
        }

        /*设置所有小圆点容器<div>*/
        #pointsDiv {
            position: absolute;
            height: 12px;
            /*width: 100px;!*在js中设置*!*/
            z-index: 2;
            bottom: 20px;
            /*left: 250px;!*在js中设置居中*!*/
        }
        /*设置所有小圆点的样式*/
        #pointsDiv span {
            cursor: pointer;/*设置鼠标移动到元素边界范围内时显示的光标样式，pointer表示指示链接的指针（一只小手）*/
            float: left;
            border: 1px solid #fff;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #333;
            opacity: 0.7;
            margin: 0 3px;
        }

        /*设置第一个小圆点的默认样式*/
        #pointsDiv .on {
            background: orangered;
        }
        /*设置切换按钮*/
        .arrow {
            cursor: pointer;/*设置鼠标移动到元素边界范围内时显示的光标样式，pointer表示指示链接的指针（一只小手）*/
            display: none;
            line-height: 39px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            width: 40px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top: 180px;
            background-color: RGBA(0, 0, 0, 0.3);
            color: #fff;
            /*去除超链接下划线*/
            text-decoration: none;
        }
        /*鼠标移到切换按钮上时*/
        .arrow:hover {
            background-color: RGBA(0, 0, 0, 0.7);
        }
        /*鼠标移到整个div区域时使切换按钮显示*/
        #container:hover .arrow {
            display: block;/*显示*/
        }
        /*上一个切换图标的左外边距*/
        #prev {
            left: 20px;
        }
        /*下一个切换图标的右外边距*/
        #next {
            right: 20px;
        }
    </style>
    <!--引入jQuery-->
    <script type="text/javascript" src="../jquery/jquery-1.10.1.js"></script>
    <script type="text/javascript">
        $(function (){
            /*
            * 1. 获取对象
            * */
            //获取外部容器
            var $container=$("#container");
            //获取图片容器
            var $imgList=$("#imgList");
            //获取所有小圆点
            var $points=$("#pointsDiv span");
            //获取切换按钮
            var $prev=$("#prev");
            var $next=$("#next");
            /*
            * 设置所有小圆点容器的宽度
            * */
            //获取小圆点容器
            var $pointsDiv=$("#pointsDiv");
            //设置小圆点容器的宽度，18=border*2+margine*2+width
            $pointsDiv.width(18*$points.length);
            //设置小圆点容器居中
            $pointsDiv.css("left",($container.width()-$pointsDiv.width())/2);
            /*
            * 设置前后切换按钮
            * */
            //定义每次翻页的偏移量，常量，值为图片宽度600
            var PAGE_WIDTH=600;
            //定义每次动画执行的总时间
            var time=400;
            //定义动画的每帧移动的单位时间
            var itemTime=10;
            //创建翻页切换函数nextPage()
            //在按钮的回调函数中调用nextPage()
            $prev.click(function (){
                nextPage(false);
            });
            $next.click(function (){
                nextPage(true);
            });
            /*
            * 小圆点切换图片
            * */
            $points.click(function(){
                nextPage($(this).index());
                //修改nextPage()函数
                //修改updatePoint()函数
            });
            /*
            * 图片自动轮播
            * */
            //创建自动轮播定时器
            var autoPlay=setInterval(function(){
                //调用页面切换函数
                nextPage(true);
            },3000);
            //为整个外部容器绑定鼠标移入/移出事件
            $container.hover(function(){
                //鼠标移入，关闭自动轮播定时器
                clearInterval(autoPlay);
            },function(){
                //鼠标移出，重新开启自动轮播定时器
                autoPlay=setInterval(function(){
                    nextPage(true);
                },3000);
            });


            /*
            * 创建翻页切换函数nextPage()
            * */
            //定义标识变量，用于记录动画是否还执行中
            var isMoving=false;
            function nextPage(next){
                //判断翻页动画是否正在执行
                if(isMoving){
                    //退出
                    return;
                }
                //翻页动画开始执行时，修改ismoving的值为true
                isMoving=true;
                //判断总偏移量offset
                //判断参数类型
                if(typeof next=="boolean"){
                    var offset=next?-PAGE_WIDTH:PAGE_WIDTH;
                }else{
                    var offset=-PAGE_WIDTH*(next-oldIdex);
                }
                //定义单位偏移量
                var itemOffset=offset/(time/itemTime);
                //获取当前图片容器的left值
                var left=$imgList.position().left;
                //目标位置left值targetLeft
                var targetLeft=left+offset;
                //创建定时器
                var timer=setInterval(function(){
                    //修改图片容器的left值
                    left+=itemOffset;
                    //判断是否到达目标位置
                    if(left==targetLeft){
                        clearInterval(timer);
                        //翻页动画执行完毕，修改isMoving的值为false
                        isMoving=false;
                        /*
                        * 图片首尾相接
                        * */
                        //判断是否已经移动到（假的）第一张/最后一张
                        //是否移动到假的最后一张？left==0
                        if (left==0){
                            //到达假的最后一张，修正left值，left=-PAGE_WIDTH*真正的图片个数（小圆点个数）
                            left=-PAGE_WIDTH*$points.length;
                        }else if(left==(-600*($points.length+1))){
                            //到达假的第一张，修正left值，left=-PAGE_WIDTH
                            left=-PAGE_WIDTH;
                        }
                    }
                    //移动图片容器
                    $imgList.css("left",left);
                },itemTime);
                /*
                * 更新小圆点
                * */
                //创建小圆点更新函数updatePoint()
                //每次翻页动画执行完毕后调用小圆点跟新函数updatePoint()
                updatePoint(next);
            }
            /*
            * 创建小圆点更新函数updatePoint()
            * */
            //定义前一个显示的小圆点的索引oldIndex，初始值默认为0
            var oldIdex=0;
            function updatePoint(next){
                //计算当前应该显示的小圆点的索引
                //判断参数类型
                if(typeof next=="boolean"){
                    index=next?oldIdex+1:oldIdex-1;
                }else{
                    index=next;
                }
                //判断当前小圆点是否是最后一个/第一个（小圆点索引值边界判断）
                if(index>$points.length-1){
                    //应该显示第一个
                    index=0;
                }else if(index<0){
                    //应该显示最后一个
                    index=$points.length-1;
                }
                //移除前一个显示的小圆点的class属性值“on”
                $points[oldIdex].className="";
                //为当前应该显示的小圆点添加class属性值“on”
                $points[index].className="on";
                //更新前一个显示的小圆点的索引
                oldIdex=index;
            }
        });
    </script>
</head>
<body>
    <div id="container">
        <div id="imgList" style="left: -600px">
            <img src="img/5.jpg" alt="5" />
            <img src="img/1.jpg" alt="1" />
            <img src="img/2.jpg" alt="2" />
            <img src="img/3.jpg" alt="3" />
            <img src="img/4.jpg" alt="4" />
            <img src="img/5.jpg" alt="5" />
            <img src="img/1.jpg" alt="1" />
        </div>
        <div id="pointsDiv">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>

</body>
</html>