1、 前端用到的编辑器有很多，本例通过选择Sublime Text3编辑器来实现轮播图的制作。第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个html文件，通过Tab快捷键迅速创建一个html模板，并命名标题。如图所示：
2、 第二步，在Body中写简单的html代码。首先在顶部head标签里引入外部CSS和JS，注意要引入jQuery库，并且要放在所写的js上面，不然不会有效果。然后，在一个d足毂忍珩iv中包裹两个ul,第一个ul用于显示图片，第二个ul则定义页码。代码如下所示： <div id="scrollPics"> <ul class="slider"> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> </ul> <ul class="num"></ul> </div>
3、 第三步，写外部CSS。其中，我们设置div的高为 420p垓矗梅吒x，宽为 790px，并且设为相对定位；第二个ul设置绝对定位，并处理好位置。然后第二个ul中的li标签设置左浮动，以及相关样式；最后的样式是通过js新增的类的样式，即显示索引对应的图片的样式。代码如下： ul li { list-style: none;}#scrollPics { height: 420px; width: 790px; margin-bottom: 10px; overflow: hidden; position: relative;}.slider { margin-top: 0;}.num { position: absolute; right: 5px; bottom: 5px;}#scrollPics .num li { float: left; color: #FF7300; text-align: center; line-height: 16px; width: 16px; height: 16px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #FF7300; background-color: #fff;} #scrollPics .num li.on { color: #fff; line-height: 21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #FF7300; font-weight: bold; }
4、 第四步，开始写核心的JS代码。首先定义几个全局变量。其中，imgCon表示获取到对应的图片存放的变量，并且初始化，除第一张图片外其他隐藏；num变量则用来定义页码；len 定义图片个数；index 表示索引。如图所示： var slider = $('#scrollPics .slider'); var imgCon = $('#scrollPics .slider li'); //获取图片 imgCon.not(imgCon.eq(0)).hide(); //除第一张其他隐藏 var num = $('#scrollPics .num'); //定义页码 var len = slider.find('li').length; var html_page = '', index = 0;
5、 第五步，我们要实现的效果是，图片自动轮播，所以需要获取到对应的索引的值，然后设定计时器，每隔两秒切换到下一个图片。如果到了最后面一张图片，则索引值又变成0，即切换到第一张图片，如此规律循环。如图所示： for (var i = 0; i < len; i++) { if (i === 0) { html_page += '<li class=on >' + (i + 1) + '</li>'; } else { html_page += '<li>' + (i + 1) + '</li>'; } } window.timer = setInterval(function () { showPic(index); index++; if (index === len) { index = 0; } }, 2000);
6、 第六步，当我们点击或鼠标移动到某个索引处时，显示相应的索引对应的图片，并且旁边的图片隐藏，然后为该索引添加一个类的样式，相应的兄弟节点移除对应的样式；接着添加一个鼠标移动事件，用来获取索引，以及显示索引对应的图片。代码如下图所示： //显示索引对应的图片 function showPic(index) { imgCon.eq(index).show().siblings("li").hide(); num.find("li").eq(index).addClass('on').siblings("li").removeClass("on"); } //页码按钮移入 $('.num li').mouseover(function () { index = $(this).index(); //获取索引 showPic(index); });
7、 最后，触发被选元素的指定事件。鼠标移动到相应的索引处时，清除计时器，显示相应的图片。否则，继续执行计时器事件，每隔两秒，索引增加一个单位，展示相应的图片，循环图片轮播。代码如下图所示：$('#scrollPics').hover(function () { clearInterval(window.timer); }, function () { window.timer = setInterval(function () { showPic(index); index++; if (index === len) { index = 0; } }, 2000); }).trigger('mouseleave'); //触发被选元素的指定事件
8、 至此，完整的js代码就完成了，代码如下。同时，完整的轮播图代码也就完成了。我们检查代码无误后，切换到html文件，右击，或在文件夹中双击文件，在浏览器中查看效果，效果如图所示（其实每写完一步代码就应该查看效果，即调试。）。 $(function () { var slider = $('#scrollPics .slider'); var imgCon = $('#scrollPics .slider li'); //获取图片 imgCon.not(imgCon.eq(0)).hide(); //除第一张其它隐藏 var num = $('#scrollPics .num'); //定义页码 var len = slider.find('li').length; var html_page = '', index = 0; //添加页码 for (var i = 0; i < len; i++) { if (i === 0) { html_page += '<li class=on >' + (i + 1) + '</li>'; } else { html_page += '<li>' + (i + 1) + '</li>'; } } num.html(html_page); //显示索引对应的图片 function showPic(index) { imgCon.eq(index).show().siblings("li").hide(); num.find("li").eq(index).addClass('on').siblings("li").removeClass("on"); } //页码按钮移入 $('.num li').mouseover(function () { index = $(this).index(); //获取索引 showPic(index); }) $('#scrollPics').hover(function () { clearInterval(window.timer); }, function () { window.timer = setInterval(function () { showPic(index); index++; if (index === len) { index = 0; } }, 2000); }).trigger('mouseleave'); //触发被选元素的指定事件}); 附：本经验关键词：怎样做轮播图、轮播图怎么做、轮播图实现原理、jquery轮播图代码、JS做轮播图、轮播图自动播放、图片轮播怎么做、怎样制作图片轮播、js如何制作图片轮播、JS怎么制作轮播图、JS轮播图、轮播图JS、JS制作轮播图。 附：可以点击下面“经验引用”参考我的另一篇经验“如何用Bootstrap制作轮播图”
