dw DIV+CSS实现图片自动切换?

 我来答
小鸟蚁人
2020-01-17 · 超过13用户采纳过TA的回答
知道答主
回答量:124
采纳率:71%
帮助的人:8.5万
展开全部

完全可以,用css的重复播放动画的功能实现自动切换。

做了个小例子,你可以看看,基本的思路就这样了,效果还比较不错啦。这个思路还可以用来作为图片滚动播放的例子呢。

body部分代码:

<body>

<div id="box1">

<div id="box2">

<img src="https://www.baidu.com/img/bd_logo1.png">

<img src="https://www.baidu.com/img/bd_logo1.png">

<img src="https://www.baidu.com/img/bd_logo1.png">

<img src="https://www.baidu.com/img/bd_logo1.png">

</div>

</div>

</body>

css的代码:

*{

padding:0;

margin:0;

}

html,body{

overflow-x:hidden;

overflow-y:auto;

}

#box1{

position:relative;

width:500px;

height:450px;

margin:0 auto;

background:red;

overflow:hidden;

}


#box2{

float:left;

width:2000px;

height:450px;

animation:box2 2s both linear infinite;

-webkit-animation:box2 2s both linear infinite; /* Safari and Chrome */

}


#box2:hover {

animation-play-state: paused;

}


@keyframes box2

{

from {

margin-left:0;

}

to {

margin-left:-1500px;

}

}


@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {

margin-left:0;

}

to {

margin-left:-1500px;

}

}


img{

float:left;

width:500px;

height:450px;

}

效果图;

好像时间间隔设置太短了,可以把动画播放的时间延长一点。

跟我一起学编程
2019-12-28 · 学编程,做程序猿,我是认真的,一起来吧!
跟我一起学编程
采纳数:802 获赞数:2153

向TA提问 私信TA
展开全部
你这应该是想实现图片的幻灯效果吧,仅仅靠div+css是不够的,还需要配合着JS来完成,网上有这样的例子。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式