如何使用html+css+js完成轮播图的效果？

下面是使用html+css+js(javascript)来完成轮播图功能的简单例子，有兴趣的可以看一下。

1首先创建一个html文件，下图中我创建的是html5的，所以看起来很简单。

2然后在html的主体部分添加一个div标签，然后在该标签下添加一个img标签，并设置img的宽高。

3然后我们可以在html头部标题下添加css样式代码来控制div的显示效果。

4接下来在body标签中添加js的事件onload，也就是加载该页面的时候，调用onload的值对应的方法，图中的话就是init()。再为img添加一个id属性，这样我们可以通过getElementById(id值)来得到该元素标签。

5然后通过

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('div').click(function(){$(this).css('color','blue')})。

3、浏览器运行index.html页面，此时点击123所在的div，div会变为蓝色文本。

1、打开HBuilder，点击软件顶部的文件选项，在d出的选择中点击新建，选您要新建的文件JS，HTML，CSS等可以进行选择。

2、输入完成后将文件进行保存，可使用Ctrl+s键保存文件，或点击红框标注出的位置也可保存文件。

3、保存完成后点击HBuilder软件菜单栏的运行选项，点击运行到浏览器选项，选择自己要运行的浏览器即可。

4、最后在选择的浏览器中出现运行的结果即可。

---