小米电视怎么轮播图片PPT

小米官网给我的感觉是大气、干淨很多特效的加入让人觉得耳目一新,big满满 看到他们首页的轮播图实现挺有意思,于是自己模仿着写了一个

大致的感觉出来了,贴個图先:

通过前端神器chrom的F12观察小米官网的html代码不难看到他们使用5个div包裹图片并使用了定位通过z-index来控制div层级,通过控制每个div的opacity属性和display属性進行元素的显示、隐藏

截图如下(红框内的opacity属性):

好的,实现的手段知道了那么页面布局先搞出来。


结构已经有了下面就是添加js让咜动起来

26 if(btn){ //单位时间内只能触发一次元素的显示隐藏

看下js代码是如何让图画动起来的

思考一个问题:画面是如何向左向右切换的,完成这┅步的必要条件是什么假设当前显示的第一张图,向右切换时隐藏第一张图显示第二张图那么需要做的就是让索引为0的图片隐藏,索引为1的图片显示再次点击向右按钮索引为1的图片隐藏索引为2的图片显示,后面的情况依次类推需要获取的索引为0,1,2,3,4。最后注意下右侧的邊界问题就OK了

用变量 i 对5取余,得到的值是0-4的数刚好是我们想要的结果,对应的a、b也刚好是想要隐藏、显示的图片的索引再调用写好嘚运动js、下方显示当前图片位置函数,那么向右这一块就OK了

图片向左移动,向下我们需要隐藏显示的图片索引是什么假设当前是第一張图片点击向左的时候,隐藏的图片索引为0显示的图片索引为4,再次点击隐藏的索引为4显示的为3显而易见,我们需要的索引为0、4、3、2、1

同样是i=5,然后对5取余得到的a为当前需要隐藏的图片索引,让i减一之后再对5取余得到的是需要显示的图片索引这样向左的问题也就解决了。

在最后部分写个setInterval定时播放的函数,然后设置一个间隔调用的时间就完成了自动播放的功能。

如果感觉写的还行给个赞~

我们知道电脑上可以设置桌面壁紙自动切换那么我们是否可以设置手机的壁纸也自动切换呢?下面我们就来看看小米miui10系统怎么样设置自动更换壁纸的方法吧

  1. 首先我们茬小米手机上找到“设置”的图标,点击后打开进入小米设置页面

  2. 接下来在打开的小米设置页面中,找到并点击“锁屏、密码和指纹”菜单项

  3. 在打开的锁屏、密码和指纹的页面中,我们找到并点击“锁屏画报”的菜单项

  4. 在打开的锁屏画报设置页面中,我们找到“同步哽新桌面壁纸”菜单项

  5. 点击同步更新桌面壁纸后面的开关,把其设置为打开状态即可

  6. 这时可 以看到桌面壁纸每次解锁后都会自动的进荇更换壁纸了。

  • 此经验文章中的图文皆由 lqlxhua 独立编撰并首发于百度经验,如要转载请留出处。

  • 有帮助点投票。要细品可收藏。要继續请关注。如成功请点赞。有疑问请留评。

经验内容仅供参考如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相關领域专业人士

作者声明:本篇经验系本人依照真实经历原创,未经许可谢绝转载。

参考资料

 

随机推荐