js开发实例仿京东侧边导航栏&网页轮播图

2022年7月3日10:17:54

二十四、仿京东侧边导航栏

HTML 代码:

js开发实例仿京东侧边导航栏&网页轮播图

JS代码

js开发实例仿京东侧边导航栏&网页轮播图
js开发实例仿京东侧边导航栏&网页轮播图

二十五、网页轮播图

轮播图也称为焦点图,是网页中比较常见的网页特效。

功能需求:

1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。

①因为js较多,我们单独新建js文件夹,再新建js文件,引入页面中。

②此时需要添加load事件。

③鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。

④显示隐藏display按钮

JS代码:

js开发实例仿京东侧边导航栏&网页轮播图

2.动态生成小圆圈

① 动态生成小圆圈。。

② 核心思路:小圆圈的个数要跟图片张数一致。

③ 所以首先先得到u里面图片的张数(图片放入i里面,所以就是i的个数)。

④利用循环动态生成小圆圈(这个小圆圈要放入ol里面)

⑤创建节点createElement(“”)

⑥插入节点ol. appendChild(i)

⑦第一个小圆圈需要添加current类

JS 代码:

js开发实例仿京东侧边导航栏&网页轮播图

点击圆圈,变色

①小圆圈的排他思想

②点击当前小圆圈,就添加Current类

③其余的小圆圈就移除这个current类

④注意:我们在刚才生成小圆圈的同时,就可以直接绑定这个点击事件了。

js开发实例仿京东侧边导航栏&网页轮播图

3.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。

①点击右侧按钮一次,就让图片滚动一张。

②声明一个变量num,点击一次, 自增1,让这个变量乘以图片宽度,就是ul的滚动距离。

③无缝滚动。

④把ul第一个i复制一份,放到ul的最后面。

⑤当图片滚动到克隆的最后一张图片时,让ul 快速的、不做动画的跳到最左侧: left 为0。

⑥让num为0。

JS 代码:

js开发实例仿京东侧边导航栏&网页轮播图
js开发实例仿京东侧边导航栏&网页轮播图

克隆第一张图

js开发实例仿京东侧边导航栏&网页轮播图

4.图片播放的同时,下面小圆圈模块跟随一起变化。

①点击右侧按钮,小圆圈跟随变化。

②最简单的做法是再声明一个变量cirde,每次点击自增1.注意,左侧按钮也需要这个变量,因此要声明全局变量。

③但是图片有5张,我们小圆圈只有4个少- -个,必须加一个判断条件。

④如果circle == 4就从新复原为0 。

JS 代码:

js开发实例仿京东侧边导航栏&网页轮播图

当我们点击了某个小li就要把这个li的索引号给num

当我们点击了某个小1i就要把这个1i的索引号给circle

5.点击小圆圈,可以播放相应图片。

①点击小圆圈滚动图片。

②此时用到animate动画函数,将is文件引入 (注意,因为indexjis依赖animate.jis所以,animatejs 要写到index.js上面)。

③使用动画函数的前提,该元素必须有定位。

④注意是ul移动而不是小li。

⑤滚动图片的核心算法:点击某个小圆圈,就让图片滚动小圆圈的索引号乘以图片的宽度做为ul移动距离。

⑥此时需要知道小圆圈的索引号,我们可以在生成小圆圈的时候,给它设置-个自定义属性,点击的时候获取这个自定义属性即可。

JS 代码:
js开发实例仿京东侧边导航栏&网页轮播图
js开发实例仿京东侧边导航栏&网页轮播图

6.鼠标不经过轮播图,轮播图也会自动播放图片。

①自动播放功能。

②添加一个定时器。

③自动播放轮播图,实际就类似于点击了右侧按钮。

④此时我们使用手动调用右侧按钮点击事件arrow_ r.click()。

7.鼠标经过,轮播图模块,自动播放停止。

js开发实例仿京东侧边导航栏&网页轮播图
js开发实例仿京东侧边导航栏&网页轮播图

  • 作者:墨_风
  • 原文链接:https://blog.csdn.net/mocoll/article/details/119831700
    更新时间:2022年7月3日10:17:54 ,共 1201 字。