未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
图片轮播效果代码(html)

2019.08.08

关注

来源站点:w3cschool

来源网址:https://www.w3cschool.cn/lwp2e2/7cz212kd.html

安装本地测试后的源码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<title></title> 

<style type="text/css"> 

*{ 

margin: 0; 

padding: 0; 

#test{ 

position: relative; 

width: 300px; 

height: 200px; 

overflow: hidden; 

border: 1px solid #d4d4d4; 

#test ul{ 

position: absolute; 

top:0; 

left: 0; 

height:200px; 

#test ul li{ 

float: left; 

width: 300px; 

height:200px; 

@-webkit-keyframes myAnimation{ 

0%{ 

top:0; 

40%{ 

top:-200px; 

70%{ 

top:-400px; 

100%{ 

top:-600px; 

#test ul{ 

-webkit-animation-name:myAnimation; 

-webkit-animation-duration:20s; 

-webkit-animation-timing-function:linear; 

-webkit-animation-iteration-count:infinite; 

</style> 

</head> 

<body> 

<div id="test"> 

<ul> 

<li><img width="300" height="200" src="image/1.jpg" alt="" /></li> 

<li><img width="300" height="200" src="image/2.jpg" alt="" /></li> 

<li><img width="300" height="200" src="image/3.jpg" alt="" /></li> 

<li><img width="300" height="200" src="image/4.jpg" alt="" /></li> 

</ul> 

</div> 

</body> 

</html> 




备忘-笔记与疑问:

  1. <img src=“图片路径” alt=“图片ALT标签” />

    最佳 写法:<img src=”123.jpg” alt=“泉州seo博客”/>

    意义:利于搜索引擎识别收录

    避免堆积:<img src=”123.jpg” alt=”泉州seo,厦门seo,福建seo”/>

  2. 修改备忘:修改图片地址、修改时间、修改尺寸

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP阅读全文并永久保存 更多类似文章
猜你喜欢
类似文章
html5 移动端单页面布局
很有创意的3D盒子图片切换效果
JavaScript|你不知道的CSS属性-Filter(滤镜)
仿迅雷首页flash幻灯效果代码
jQuery---突出展示案例
HTML连载67-手风琴效果、2D转换模块
更多类似文章 >>
生活服务
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!