Sublime Text
01首先在Sublime Text下面准备一个html和5张图片,图片宽高为600px和400px,如下图所示
02然后在HTML页面中布局轮播图的结构,如下图所示,主要包括图片区域,圆形按钮,左右箭头
03接下来需要给轮播图页面布局声明一些样式,请按照下图所示的样式代码进行声明
04最后就是实现轮播图的JS脚本功能,如下图所示,主要包括前进,后退,自动播放的功能
05最后运行页面,你就会看到下图所示的轮播图效果,点击圆圈或者左右箭头可以切换轮播图
1、提前准备一组图片,将图片名称设置一定规律:例如 img1.jpg、img2.jpg
2、编写鼠标点击事件
3、在鼠标点击时间里,判断鼠标点击次数
4、根据不同次数,显示不同的图片
<script type="text/javascript">$(function(){
var items=new Arrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg")
var i=0
$("#bgImage").click(function(){
i++
if(i>items.length){
i=1
}
$(this).prop("src","img"+i+".jpg")
})
})
</script>