html中图片轮播怎么弄

一、数字键控制代码：
<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:18px;text-align:left;background-color:gray">2</span></a>
  <a href="javascript:show(3)"><span id="I3" style="width:18px;text-align:left;background-color:gray">3</span></a>
    <a href="javascript:show(4)"><span id="I4" style="width:18px;text-align:left;background-color:gray">4</span></a>
    <a href="javascript:show(5)"><span id="I5" style="width:18px;text-align:left;background-color:gray">5</span></a>
    <a href="javascript:show(6)"><span id="I6" style="width:18px;text-align:left;background-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=1;i<(maxIndex+1);i++){
  if(i==nowIndex)
   {documentgetElementById('pic'+nowIndex)styledisplay='';
   documentgetElementById('I'+nowIndex)stylebackgroundColor='red';}
  else
   {documentgetElementById('pic'+i)styledisplay='none';
   documentgetElementById('I'+i)stylebackgroundColor='gray';}
  }{
  if(nowIndex==maxIndex)
   nowIndex=1;
  else
   nowIndex++;
  }
 theTimer=setTimeout('show()',3000);
 }
 </script>
 </div>
二、自动播放：
<div id="butong_net_left" style="overflow:hidden;width: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">

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

2、这里是html文件，引入css和html代码文件，如图所示。

3、这里是css文件代码，上面是div和显示的效果代码，后面是动画效果。

4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。

5、如图所示这里是效果图，会根据时间轮播显示下一张 了。

轮播的原理是改变图中ul的left值或者right值 以下代码供你参考

HTML

CSS

JS代码
注意此处没有做临界验证   只是原理

animation-name： 规定需要绑定到选择器的 keyframe 名称。
animation-duration： 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function： 规定动画的速度曲线。
animation-delay： 规定在动画开始之前的延迟。
animation-iteration-count： 规定动画应该播放的次数。
animation-direction： 规定是否应该轮流反向播放动画。

@keyframes{

}

给每个动画及暂停分配时间，按照总时间的百分比分配；

以三张为例制作轮播图，若将最后的数值设置为100%，出现问题在于最后一张到第一张的切换没有动画；尝试给最后一张到第一张的动画时间，但是中间的切换效果是从最后一张向右滑动直到显示出第一张图，其效果反人类，不美观；但是，通过尝试在最后的一张后面在添加一张与第一张相同的，可实现循环的效果；

方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容

若只将要显示的三张导入，会出现最后一张到第一张没有动画效果；通过尝试在最后的一张后面在添加一张与第一张相同的，可实现循环的效果；

问题在于一直处于切换状态，中间没有停顿；

---