怎么用html5+css3 实现图片轮播

html-css08

怎么用html5+css3 实现图片轮播,第1张

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

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

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

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

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

一、数字键控制代码:

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

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</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 autooverflow:

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: pinkcolor:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}#wrap:hover #list{-webkit-animation-play-state:paused}</style>

扩展资料:

轮播图是网站介绍其主要产品或重要信息的一种方式。简单的一点是,在网页的某一部分,会依次呈现几个带有重要信息的图片,这样访问者就可以快速了解网站想要表达的主要信息。各种新闻网站的头版头条也是以这种方式呈现的重要信息。

轮播图的实现方式:例如:有5张轮播的图片,每张图片的宽度为1024px,高度为512px。那么旋转的窗口大小应该是一张图片的大小,即1024×512,然后,将五张0px的图片水平连接,形成一张5120px宽、512px高的图片,最后,通过每次向左移动1024px,可以旋转大的合成图像。

参考资料来源:

百度百科-轮播