JS实现小图放大轮播效果-白红宇的个人博客

JS实现小图放大轮播效果

发布日期：2021-08-26 12:38:21 浏览次数：4 分类：技术文章

本文共 1657 字，大约阅读时间需要 5 分钟。

JS实现小图放大轮播页面效果入下（图片为优行商旅页面照片）：

实现效果：

图片自动轮播，鼠标移入停止，移出继续轮播

点击下方小图可以实现切换

步骤一：建立HTML布局，具体如下：

　　其中div为图片轮播区域，li用于放置小图

步骤二：CSS布局

*{
               margin:0;            padding:0;        }        ul{
               list-style: none;            height:auto;            position: absolute;            top:95%;            left:32%;        }        #carousel{
               width:100%;            height:400px;            background-image: url(images/1.jpg);            background-repeat: no-repeat;            background-position: center;            position: relative;        }        li{
               float:left;            margin-right: 20px;        }        span{
               display: block;            width:110px;            height:41px;            background-size: 110px 41px;            border:none;        }        li:nth-child(1) span{
               background-image: url(images/1.jpg);            border:2px solid orange;        }        li:nth-child(2) span{
               background-image: url(images/2.jpg);        }        li:nth-child(3) span{
               background-image: url(images/3.jpg);        }        li:nth-child(4) span{
               background-image: url(images/4.jpg);        }

　　通过定位使小图显示在下方，此时轮播区域显示的为第一张图片

步骤三：添加JS逻辑（其中该代码注释中的圆点是指轮播图下方小图）

let cnt=1;//计数器let ulctrl=document.getElementById("ulctrl");//圆点控制器let lis=ulctrl.children;//圆点们let linow=lis[0];//初始化当前圆点为第一个let clock;//声明计时器var carousel=document.getElementById("carousel");//背景容器for(let i=0;i

转载于:https://www.cnblogs.com/web12/p/10121824.html

转载地址：https://blog.csdn.net/weixin_33885253/article/details/93301606 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：iOS内存管理规则

下一篇：npm和node的版本过低时的解决办法

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章