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

一、数字键控制代码：

<div style="position:relative top:-50px left:240px">

    <a href="javascript:show(1)"><span id="I1" style="width:18px text-align:left background:gray">1</span></a>

    <a href="javascript:show(2)"><span id="I2" style="width:18pxtext-align:leftbackground-color:gray">2</span></a>

  <a href="javascript:show(3)"><span id="I3" style="width:18pxtext-align:leftbackground-color:gray">3</span></a>

    <a href="javascript:show(4)"><span id="I4" style="width:18pxtext-align:leftbackground-color:gray">4</span></a>

    <a href="javascript:show(5)"><span id="I5" style="width:18pxtext-align:leftbackground-color:gray">5</span></a>

    <a href="javascript:show(6)"><span id="I6" style="width:18pxtext-align:leftbackground-color:gray">6</span></a></div>

    <script language="javaScript"> 

 var nowIndex=1

 var maxIndex=6

 function show(index)

 {

 if(Number(index)){                                     

 clearTimeout(theTimer)

 nowIndex=index

 }

 for(var i=1i<(maxIndex+1)i++){

  if(i==nowIndex)

   {document.getElementById('pic'+nowIndex).style.display=''

   document.getElementById('I'+nowIndex).style.backgroundColor='red'}

  else

   {document.getElementById('pic'+i).style.display='none'

   document.getElementById('I'+i).style.backgroundColor='gray'}

  }{

  if(nowIndex==maxIndex)

   nowIndex=1

  else

   nowIndex++

  }

 theTimer=setTimeout('show()',3000)

 }

 </script>

 </div>

二、图片自动播放：

<div id="butong_net_left" style="overflow:hiddenwidth:1000px">

<table cellpadding="0" cellspacing="0" border="0">

<tr><td id="butong_net_left1" valign="top" align="center">

<table cellpadding="2" cellspacing="0" border="0">

<tr align="center">