JavaScript小练习（二）jQuery实现banner图效果

最新推荐文章于 2022-07-09 10:30:05 发布

加油学前端

最新推荐文章于 2022-07-09 10:30:05 发布

阅读量541

点赞数

分类专栏：笔记文章标签： javascript jquery html css

本文链接：https://blog.csdn.net/weixin_45851902/article/details/114731529

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、实现目标

1.图片有自动循环播放效果;

2.右下角小圆点跟随图片的顺序改变;

3.点击小圆点转到对应图片;

4.鼠标进入图片区域停止播放，离开时继续播放。

二、效果图
（静态）
在这里插入图片描述
（动态）

在这里插入图片描述 三、代码

html部分

<body>
        <div id="play" class="play">
            <ul id="dots" class="dots">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul id="imgs" class="imgs">
                <li><a href=""><img src="1.jpg" alt="图一"></a></li>
                <li><a href=""><img src="2.jpg" alt="图二"></a></li>
                <li><a href=""><img src="3.jpg" alt="图三"></a></li>
                <li><a href=""><img src="4.jpg" alt="图四"></a></li>
                <li><a href=""><img src="5.jpg" alt="图五"></a></li>
                <li><a href=""><img src="1.jpg" alt="图一"></a></li>
            </ul>
        </div>
    </body>

css部分

              *{ padding: 0px; margin: 0px;}
            img{ border: none;}
            body{ background: rgb(236,250,255);}

            #play{ position: relative; width: 1160px; height: 188px; top: 200px; left: 180px; overflow: hidden;}

            .dots{ width: 200px; height: 30px;  position: absolute; top: 165px; left: 1000px; }
            .dots li{ list-style: none; width: 30px; height: 20px; line-height: 20px; float: left;  z-index: 30; opacity: 0.5;
            /*background-color: white;*/ text-align: center; margin-left: 12px; font-size: 35px; color: rgb(97, 88, 97); 
            cursor: pointer; width: 10px; height: 10px; background-color: white; border-radius: 50%;}
            .dots .active{ opacity: 1; width: 30px; height: 10px; border-radius: 10px;}
           
            .imgs{ position: absolute; top: 0px; left: 0px; z-index: -1; display: flex; flex-wrap: nowrap;} 
            /*display: flex; flex-wrap: nowrap实现横向排列*/
            .imgs li{ list-style: none; float: left; }

js部分

        <script src="../jquery-1.10.1.min.js"></script>
        <script>
            $(function(){
                var aBtns =  $("#dots li");
                var oImg = $("#imgs");

                var iCount = 0;//记录当前小圆点的下标，便于计算与更改图片的位置
                var timer = null;//标记定时器

               //给小圆点添加点击事件
                aBtns.click(function(){
                    iCount = $(this).index();
                    tabImgs();
                })

                //当鼠标进入图片显示区域时取消定时器，图片停止运动
                $("#play").mouseenter(function(){
                    clearInterval(timer);
                    //鼠标离开时创建定时器，继续运动
                }).mouseleave(function(){
                    timer = setInterval(function(){
                        iCount ++;
                        tabImgs();
                    }, 2500)
                })

                //设置定时器自动轮播
                timer = setInterval(function(){
                        iCount ++;
                        tabImgs();
                    }, 2500)


                //小圆点和图片的同步切换
                function tabImgs(){
                    aBtns.attr("class", "").eq(iCount).attr("class", "active");

                    if(iCount == aBtns.size()){
                        aBtns.eq(0).attr("class", "active");
                    }
                    oImg.animate({
                        left: -1160 * iCount
                    }, 500, function(){
                        //到最后一张图时重置
                        if(iCount == aBtns.size()){
                            iCount = 0;
                            oImg.css("left", 0);
                        }
                    })
                }

            })

小tips：

1.这次的动画效果是靠jQuery的animate方法结合定时器实现的，比起原生js要方便一些。

2.在做类似循环banner图时要注意在最后一张图后添加上这组图的第一张图片，以免出现空图现象。

3.用iCount将图片下标与小圆点下标统一。当下标为iCount时，oImg整体向左运动iCount个图片的宽度，即iCount* -1160，产生动画效果。同时注意到边界时的处理。

4.对于大尺寸的照片，在处理类似效果时，要学会使用
display: flex;（弹性盒子布局） flex-wrap: nowrap;（不换行）进行横向排列。
flex：nowrap; 不换行（默认值）
flex: wrap; 换行

5.还需要不断记忆和掌握jQuery的方法，以便熟练使用。

（素材来源：携程网。是恰好看到携程的banner图和自己想要实现的效果很相像，就模仿了一下，图片也是携程网下载的。）

欢迎提出建议。

加油学前端

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript小练习（二）jQuery实现banner图效果

一、实现目标1.图片有自动循环播放效果;2.右下角小圆点跟随图片的顺序改变;3.点击小圆点转到对应图片;4.鼠标进入图片区域停止播放，离开时继续播放。二、效果图（静态）（动态）三、代码html部分<body> <div id="play" class="play"> <ul id="dots" class="dots"> <li class="active"><
复制链接

扫一扫