图片百分百显示,如何让多张图片在一行内进行轮播效果?

图片百分百显示,如何让多张图片在一行内进行轮播效果?

老师,我现在想实现一个效果,例如有多张图片,每张图片的宽度是100%,占满整个页面,但是它们可以实现在一行内,实现轮播的效果,具体的数值不知道如何进行设置,能不能麻烦举个例子我看看

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
能量咕噜略略 提问者 2021-06-04 12:05:10

如果是图片100%显示,水平滚动要使用js知识点是吗,单纯靠css没法完成的是不

  • 同学你好,使用css3动画也是可以实现的,但是效果不是特别好控制,一般建议使用js来实现轮播图的效果,老师使用css3动画写了一个例子,同学可以参考一下:

    http://img1.sycdn.imooc.com//climg/60baf66709b45f7f09400379.jpg

    http://img1.sycdn.imooc.com//climg/60baf6700933c5eb08390789.jpg

    http://img1.sycdn.imooc.com//climg/60baf67b09aaa8cf08390851.jpg

    建议同学在问答区提问后,在回复区回复问题,这样老师能够及时看到,帮同学解答疑问。

    祝学习愉快!

    2021-06-05 12:01:16
  • 这里有个疑问,overflow:hidden去掉,为什么li设置成百分20的时候,网页中除了第一张,其余4张图片会消失不见呢,默认情况不是会显示一行并排显示出来么,还有就是img为什么给了个block,有什么意义?

    2021-06-05 16:01:40
  • 同学你好,因为父盒子ul设置的宽度为500%,等于5个浏览器窗口的宽度,所以ul内部的li设置为20%,占ul的五分之一,也就是一个浏览器窗口的宽度,当box盒子去掉overflow: hidden后,可以拉动底部滚动条,就能看到其他图片,如图:

    http://img1.sycdn.imooc.com//climg/60bb32cc091f232419190938.jpg

    关于img设置block:是为了解决图片与父盒子之间存在的间隙问题,如图

    http://img1.sycdn.imooc.com//climg/60bb333009f32e1b15720474.jpg

    http://img1.sycdn.imooc.com//climg/60bb333d099e836917720491.jpg

    祝学习愉快!

    2021-06-05 16:18:21
好帮手慕然然 2021-06-04 10:57:07

同学你好,可以参考以下思路来实现:

1、HTML代码部分:

http://img1.sycdn.imooc.com//climg/60b9960409e18b4310280372.jpg

2、css代码部分:按照HTML代码中的注释设置宽度即可

http://img1.sycdn.imooc.com//climg/60b9961a09fe705106590602.jpg

3、JavaScript代码部分:

http://img1.sycdn.imooc.com//climg/60b9965f09b9435307440561.jpg

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师