JS轮播图实现-优快云博客

JS轮播图

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <link rel="stylesheet" href="style.css"><!--引入css-->
    <script type="text/javascript" src="webpage/jquery-3.3.1.js"></script><!--引入jQuery-->
    <script src="./lunbo.js"></script>
</head>

<body>
    <div id="scrollpics">
        <ul>
            <li><img src="./img/tang.jpg"></li>
            <li><img src="./img/he.jpg" ></li>
            <li><img src="./img/gong.jpg"></li>
            <li><img src="./img/peng.jpg"></li>
            <li><img src="./img/sun.jpg" ></li>
            <li><img src="./img/shao.jpg"></li>
        </ul>
        <ul ></ul>
    </div>
    
</body>
</html>

2.写外部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;
    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;
}

3.开始写核心的JS代码。首先先定义几个全局变量。其中。imgCon表示获取到对应的图片存放的变量，并且初始化，除第一张外其他隐藏；num变量则用来定义页码；len定义图片个数；index表示索引。代码如图：

$(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;
            }
        },3000);
    }).trigger('mouseleave');     //触发被选元素的指定事件
});

js轮播图的制作详细过程

JS轮播图