HTML中的图片轮播怎么做？

可以上jquery插件库这个网站看看，大部分资源是免费的。轮播图也有好多。

bootstrap也提供轮播模板。

自己写的话，假如放3张轮播图，pic1，pic2，pic3。创建一个ul，ul中放5张图片，顺序是pic3，pic1，pic2，pic3，pic1，这样衔接起来。设置ul的宽度是500%，li的宽度是20%，这样图片就能一字排开，设置ul的父元素的样式为overflow:hidden再用CSS3的动画属性，让li中的图片元素位移或者让ul位移。

一、数字键控制代码：

<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">

一、数字键控制代码：

<div style="position:relativetop:-50pxleft:240px">

<a href="javascript:show(1)"><span id="I1" style="width:18pxtext-align:leftbackground: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">

---