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，可以旋转大的合成图像。
参考资料来源：
百度百科-轮播
<a href="http://liping.site">js图片轮播效果代码</a>首先我们需要引入一张图片，通过更改img标签中src的值，达到图片切换功能。
html代码：<img src="http://liping.site/1.jpg" width="331" height="220" id="carousel">
在这我们需要理理自己的思路，一、图片从何而来 二、怎么样使图片轮播，能够动起来
自定义一个数组，将需要的图片存在中间，代码如下：
var arr=new Array()
arr[0]='1.jpg'
arr[1]='2.jpg'
arr[2]='3.jpg'
arr[3]='4.jpg'
接着我们需要能够对图片进行操作定义一个函数，
function tImg(){var obj=document.getElementById('carousel')obj.src=''+arr[carIndex]}
准备好以后我们只需要获取数组的下标即可
定义初始化下标：var carIndex=0
在函数中如果carIndex变量等于数组的字符串长度-1的情况下，赋给carIndex=0的初始数值。不是的情况下carIndex就+或者=1，代码如下：
function tImg(){
var obj=document.getElementById('carousel')
if(carIndex==arr.length-1){
carIndex=0}
else{
carIndex+=1}
obj.src=''+arr[carIndex]obj.onmouseover=function(){
}
逻辑关系理清楚后我们下一步就是使他们动起来，我们需要引入setInterval来控制函数的时间，代码如下：
var time=setInterval(tImg,3000)函数3秒执行一次
做到这里我们已经能过使图片进行切换了。
