JS制作轮播图

Sublime Text 3编辑器 (也可选择其他编辑器)

Google Chrome浏览器 (或其他浏览器)

前端用到的编辑器有很多，本例通过选择Sublime Text3编辑器来实现轮播图的制作。第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个html文件，通过Tab快捷键迅速创建一个html模板，并命名标题。如图所示：

第二步，在Body中写简单的html代码。首先在顶部head标签里引入外部CSS和JS，注意要引入jQuery库，并且要放在所写的js上面，不然不会有效果。然后，在一个div中包裹两个ul,第一个ul用于显示图片，第二个ul则定义页码。代码如下所示：        

第三步，写外部CSS。其中，我们设置div的高为 420px，宽为 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;    }

第四步，开始写核心的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;

第五步，我们要实现的效果是，图片自动轮播，所以需要获取到对应的索引的值，然后设定计时器，每隔两秒切换到下一个图片。如果到了最后面一张图片，则索引值又变成0，即切换到第一张图片，如此规律循环。如图所示：       for (var i = 0; i < len; i++) {        if (i === 0) {            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');     //触发被选元素的指定事件

至此，完整的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 += '

注意要引入jQuery库，并且所写的js要放上面，不然不会有效果。

图片仅供参考，读者可以自行下载实践。

如果您觉得这篇经验对您有帮助，麻烦给小编点个赞，投个票；如果您想查看更多我的经验，请添加关注或收藏经验。当然，您也可以点击右下方的双箭头分享给好友。感谢您的支持！