Sublime Text
01首先在Sublime Text下面准备一个html和5张图片，图片宽高为600px和400px，如下图所示
02然后在HTML页面中布局轮播图的结构，如下图所示，主要包括图片区域，圆形按钮，左右箭头
03接下来需要给轮播图页面布局声明一些样式，请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能，如下图所示，主要包括前进，后退，自动播放的功能
05最后运行页面，你就会看到下图所示的轮播图效果，点击圆圈或者左右箭头可以切换轮播图
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，可以旋转大的合成图像。
参考资料来源：
百度百科-轮播
这是3张图片切换的，把imag[i] (图片名)，ink[i](链接名)，text[i] (图片文字)改成自己图片的对应属性就可以了，要在加图片就把三个数字的下标在加一个var pic_width=225//宽var pic_height=173//高
var button_pos=4//按扭位置 1左 2右 3上 4下
var stop_time=4000//图片停留时间(1000为1秒钟)
var show_text=0//是否显示文字标签 1显示 0不显示
var txtcolor="FF4A8C"//文字色
var bgcolor="FFFFFF"//背景色
var imag=new Array()
var link=new Array()
var text=new Array()
var flashdns=""
imag[1]="20100827133323913.jpg"
link[1]="URL"
text[1]="图片名"
imag[2]="20100902170228177.JPG"
link[2]="URL"
text[2]="图片名"
imag[3]="20100827133528424.jpg"
link[3]="URL"
text[3]="图片名"
</script>
var pics="", links="", texts=""
for(var i=1i<imag.lengthi++){
pics=pics+("|"+imag[i])
links=links+("|"+link[i])
texts=texts+("|"+text[i])
}
pics=pics.substring(1)
links=links.substring(1)
texts=texts.substring(1)var focus_width=225
var focus_height=153
var text_height=24
var swf_height = focus_height+text_height
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6?0?0?0 width="'+ focus_width +'" height="'+( 173)+'">')
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="js/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">')
document.write('<param name="menu" value="false"><param name=wmode value="opaque">')
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight=' +focus_height+'&textheight='+text_height+'">')
document.write('<embed src="js/focus.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight= '+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width ="'+ focus_width +'" height="'+ 173 +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage=" http://www.macromedia.com/go/getflashplayer" />')document.write('</object>')
