当前位置:Gxlcms > JavaScript > JavaScript仿商城实现图片广告轮播实例代码_javascript技巧

JavaScript仿商城实现图片广告轮播实例代码_javascript技巧

时间:2021-07-01 10:21:17 帮助过:4人阅读

大家在逛购物商城的时候不知道有没有注意到商城首页上面都会有各种轮播广告,效果非常好,下面小编给大家整理特此分享给大家学习。具体内容如下所示:

1.HTML框架

如下图,分为三个部分,首先有个div承载,然后一个ul存放图片,一个ul存放数字,再两个button即可


2.CSS配置

首先外框div要设置和图片大小一致,并且居中对齐,position设置为相对定位,因为后面的图片什么的都是相对这个大框来绝对定位的

接着设置图片,五张图片叠加这个通过absolute这个属性来实现,因为上面我们把父级容器设置为relative,所以里面的子元素都是相对父级div来绝对定位的

接下来的其他元素我会用注释写到代码中

效果如下:

3.jquery控制轮播

实现手动轮播

意思就是鼠标移到下面数字,就显示对应的图片

实现自动轮播

实现点击轮播

动态控制li数字显示数量

通过图片数量控制标签数量即可

人气教程排行