前端开发——使用JQuery实现轮播图效果

最新推荐文章于 2024-05-07 03:39:03 发布

tingyu_

最新推荐文章于 2024-05-07 03:39:03 发布

阅读量3.5k

点赞数 1

分类专栏： web前端 JQuery

本文链接：https://blog.csdn.net/tingyu_/article/details/107370630

版权

web前端同时被 2 个专栏收录

15 篇文章 3 订阅

订阅专栏

JQuery

3 篇文章 0 订阅

订阅专栏

效果图如下：

实现的效果有：

1、图片的轮播显示，

2、鼠标放到图片上，停止轮播，离开图片，继续轮播，

3、相应的数字方块，直接跳转到数字对应的图片上。

页面结构代码如下：

第一张图片在最后再次放置的问题：

这个问题呢，我在网上查了资料，但是其中意思一直没有理解，小伙伴们有什么好的见解，欢迎评论区留言。

<body>
        <div class="play" id="play">
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
            <ul>
                <li><img src="../images/01.jpg" alt=""></li>
                <li><img src="../images/02.jpg" alt=""></li>
                <li><img src="../images/03.jpg" alt=""></li>
                <li><img src="../images/04.jpg" alt=""></li>
                <li><img src="../images/05.jpg" alt=""></li>
                <li><img src="../images/01.jpg" alt=""></li>
            </ul>
        </div>

CSS样式如下：

 <style>
            /* 去掉标签的默认样式 */
            *{
                margin: 0;
                padding: 0;
            }
            /* 给轮播图所在的div块一个宽高，并设置自左右适应居中 */
            .play{
                width: 490px;
                height: 170px;
                margin: 30px auto;
                /* 给div块加一个相对定位，在保证div块不脱离文档流的同时，制约子块（在下面子块中使用绝对定位时有解释）*/
                position: relative;
                /* 我们在这里放了5张图，这5张图是竖直排列的，肯定会超出这个块的 */
                /* 将超出这个490*170块的部分隐藏 */
                overflow: hidden;
            }
            /* 将li标签的默认样式（小圆点）去掉 */
            li{
                list-style: none;
            }
            /* 小圆点的位置设置*/
            ol{
                position: absolute;
                right: 3px;
                bottom: 5px;
                z-index: 2;
            }
            /* 小圆点样式 */
            ol li{
                float: left;
                width: 15px;
                height: 15px;
                font-size: 12px;
                background-color: red;
                margin: 0 5px;
                line-height: 15px;
                text-align: center;
            }
            /* 小圆点被选中时的样式 */
            .active{
                background-color: orange;
            }
            ul{
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
            }
            ul li {
                width: 490px;
                height: 170px;
            }
            ul li img{
                width: 100%;
                height: 100%;
            }
        </style>

小圆点样式设置中相对定位、绝对定位使用原因：

将小圆点设置为绝对定位，是为了设置小圆点靠右下的位置，而使用绝对定位的话，这个绝对定位是以它拥有定位的祖先元素为基点的，如果这个ol的父亲节点.play的div块没有设置定位情况的话，就会以文档的左上角为基点了。而为什么.play的div块要使用相对定位呢？
理由如下：因为相对定位是以元素自身为基点进行偏移的，也就是说，如果在进行了相对定位的块上没有设置上下左右偏移，这个块就不会发生任何偏移，所以在这里.play的div使用了相对定位。
在父节点设置了相对定位后，这个小圆点所在的块设置绝对定位，就是以父节点为基点进行偏移了，这个时候只需要设置它的上下左右偏移量，就可以自由设置小圆点在轮播图中的位置了。

z-index的使用：

z-index：在嵌套结构中，z-index代表了显示的顺序，z-index后面的值写的是数字，数字的值越大，就代表这一层越靠上，在显示的时候，就会先显示。

JQuery部分：

思路如下：

1、为代码简便，可以先获取一下需要用到的元素节点

2、设置一个索引Index ，用来代表当前显示的图片的下标，

3、设置一个空的timer计时器这设置，timer的作用域是最外层的函数内

4、在显示当前图片时需要有的效果：与当前图片对应的下标的背景颜色改变。

5、分析：图片轮播呢，其实就是不同下标的图片距离顶部的距离问题（大家可以先将.play中的overflow:hidden注释掉，观察效果），因为图片所在的块ul也设置了绝对定位，所以只需要改变整个.play的top这个偏移量即可，这就是轮播的核心原理。

JQuery代码如下：

<script src="../jquery-1.10.1.min.js"></script>
        <script>
            $(function(){
                var oBtns = $("#play ol li");
                var oUl = $("#play ul");
                var aLis = oUl.find("li");
                var index = 0;
                var timer = null;
//小圆点的点击事件
                oBtns.click(function(){
                    index = $(this).index();
                    tab();
                })
//鼠标移入
                $("#play").mouseenter(function(){
                    clearInterval(timer);
                })
//鼠标移出
                .mouseleave(function(){
                    timer = setInterval(function(){
                    index++;
                    tab();
                },2000);
                })

                // 启动一个定时器
                timer = setInterval(function(){
                    index++;
                    tab();
                },2000);

                function tab(){
//给所有ol 下的li 标签的class都设置为空，（除了当前Index索引之外）
                    oBtns.attr("class","").eq(index).attr("class","active");
//这个if判断解决了5张图片轮播完毕后，重新回到第一张图片，第一张图片对应的小圆点无法正常改变颜色的问题。
                    if(index == oBtns.size()){
                        oBtns.eq(0).attr("class","active");
                    }
//轮播核心
                    oUl.animate({
                        top: -170 * index
                    },500,function(){
                        if(index == oBtns.size()){
                            index = 0;
                            oUl.css("top",0);
                        }
                    })
                }
                document.title = index;
            })
        </script>

所有代码如下：

<!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>
            /* 去掉标签的默认样式 */
            *{
                margin: 0;
                padding: 0;
            }
            /* 给轮播图所在的div块一个宽高，并设置自左右适应居中 */
            .play{
                width: 490px;
                height: 170px;
                margin: 30px auto;
                /* 给div块加一个相对定位，在保证div块不脱离文档流的同时，制约子块（在下面子块中使用绝对定位时有解释）*/
                position: relative;
                /* 我们在这里放了5张图，这5张图是竖直排列的，肯定会超出这个块的 */
                /* 将超出这个490*170块的部分隐藏 */
                overflow: hidden;
            }
            /* 将li标签的默认样式（小圆点）去掉 */
            li{
                list-style: none;
            }
            /* 小圆点的位置设置
            将小圆点设置为绝对定位，是为了设置小圆点靠右下的位置，而使用绝对定位的话，这个绝对定位是以它拥有定位的祖先元素为基点的，如果这个ol的父亲节点.play的div块没有设置定位情况的话，就会以文档的左上角为基点了。而为什么.play的div块要使用相对定位呢？
            理由如下：因为相对定位是以元素自身为基点进行偏移的，也就是说，如果在进行了相对定位的块上没有设置上下左右偏移，这个块就不会发生任何偏移，所以在这里.play的div使用了相对定位。
            在父节点设置了相对定位后，这个小圆点所在的块设置绝对定位，就是以父节点为基点进行偏移了，这个时候只需要设置它的上下左右偏移量，就可以自由设置小圆点在轮播图中的位置了
             */
            ol{
                position: absolute;
                right: 3px;
                bottom: 5px;
                z-index: 2;
            }
            /* 小圆点样式 */
            ol li{
                float: left;
                width: 15px;
                height: 15px;
                font-size: 12px;
                background-color: red;
                margin: 0 5px;
                line-height: 15px;
                text-align: center;
            }
            /* 小圆点被选中时的样式 */
            .active{
                background-color: orange;
            }
            ul{
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
            }
            ul li {
                width: 490px;
                height: 170px;
            }
            ul li img{
                width: 100%;
                height: 100%;
            }
        </style>
        <script src="../jquery-1.10.1.min.js"></script>
        <script>
            $(function(){
                var oBtns = $("#play ol li");
                var oUl = $("#play ul");
                var aLis = oUl.find("li");
                var index = 0;
                var timer = null;
                oBtns.click(function(){
                    index = $(this).index();
                    tab();
                })
                $("#play").mouseenter(function(){
                    clearInterval(timer);
                })
                .mouseleave(function(){
                    timer = setInterval(function(){
                    index++;
                    tab();
                },2000);
                })
                // 启动一个定时器
                timer = setInterval(function(){
                    index++;
                    tab();
                },2000);
                console.log(oBtns.size())
                function tab(){
                    oBtns.attr("class","").eq(index).attr("class","active");
                    if(index == oBtns.size()){
                        oBtns.eq(0).attr("class","active");
                    }
                    oUl.animate({
                        top: -170 * index
                    },500,function(){
                        if(index == oBtns.size()){
                            index = 0;
                            oUl.css("top",0);
                        }
                    })
                }
                document.title = index;
            })
        </script>
    </head>
    <body>
        <div class="play" id="play">
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
            <ul>
                <li><img src="../images/01.jpg" alt=""></li>
                <li><img src="../images/02.jpg" alt=""></li>
                <li><img src="../images/03.jpg" alt=""></li>
                <li><img src="../images/04.jpg" alt=""></li>
                <li><img src="../images/05.jpg" alt=""></li>
                <li><img src="../images/01.jpg" alt=""></li>
            </ul>
        </div>
    </body>
</html>

tingyu_

关注

1
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
前端开发——使用JQuery实现轮播图效果

效果图如下：实现的效果有：1、图片的轮播显示，2、鼠标放到图片上，停止轮播，离开图片，继续轮播，3、相应的数字方块，直接跳转到数字对应的图片上。页面结构代码如下：第一张图片在最后再次放置的问题：这个问题呢，我在网上查了资料，但是其中意思一直没有理解，小伙伴们有什么好的见解，欢迎评论区留言。<body> <div class="play" id="play"> <ol> ..
复制链接

扫一扫