简单的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即可实现轮播图。

工具/材料

Sublime Text

01

首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示

02

然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头

03

接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明

04

最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能

05

最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图

轮播图是每个网站中必不可少的元素，那么如何用JS制作轮播图呢？下面我就给大家分享一下。

工具/材料

Sublime Text

01

首先需要在Sublime中创建HTML文档，然后在文档的body区域中加入如下图所示的轮播图内容

02

然后我们需要在style标签中给所添加的轮播图内容声明样式，如下图所示

03

接下来我们就需要在script标签中实现轮播图的动画脚本内容了，如下图所示，注意script标签的type类型一定要是javascript

04

最后我们运行界面程序，你就会看到如下图所示的轮播图了，点击左右的箭头和中间的圆点都可以进行轮播图的切换

---