简单的HTML+js图片轮播?

h5代码：

<div id="wrap">

<ul id="list">

<li>10</li>

<li>9</li>

<li>8</li>

<li>7</li>

<li>6</li>

<li>5</li>

<li>4</li>

<li>3</li>

<li>2</li>

<li>1</li>

</ul>

</div>

css代码：

<style type="text/css">

@-webkit-keyframes move{

0%{left:-500px}

100%{left:0}

}

#wrap{width:600pxheight:130pxborder:1px solid #000position:relativemargin:100px auto

overflow: hidden}

#list{position:absoluteleft:0top:0padding:0margin:0

-webkit-animation:5s move infinite linearwidth:200%}

#list li{list-style:nonewidth:120pxheight:130pxborder:1px solid redbackground: pink

color:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}

#wrap:hover #list{-webkit-animation-play-state:paused}

</style>

扩展资料：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

在html中轮播图怎么做,HTML轮播图怎么做

1.

打开Axure,页面名称命名为“图片轮播”在左侧部件(线框图)中,选择动态面板,左键选中,并按住左键,拖动其至工作台页面中,在上方菜单栏将宽调整为400,高为200(宽高根据个人需求来自行设置),双击建立的动态面板,d出“动态面板状态管理”窗口。给当前动态面板起名字为“图片轮播”

2.

在面板状态区域,点击“+”增加状态,需要有几个图片轮播,建立几个状态,在每个状态上,右键,可重命名,当前我们做三个图片轮播的,命名为“图1”“图2“”图3“。完成后,点击窗口的确定按钮

3.

在右侧窗口下方“部件管理”,双击动态面板的状态“图1”(注意,如果看不到部件管理,可以在菜单栏的“视图”-“面板”设置)

4.

在左侧的“元件”,左键选中并拖动一个“图片”放置于当前的工作窗口中

---