一个轮播效果的引导页

css：

#guide_page {
    /*display: none;*/
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    overflow: auto;
}

#guide_page .bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 100;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
#close_btn{
    position:absolute;
    top:74px;
    right:80px;
    z-index:101;
    font-size: 24px;
    color: #FFFFFF;
    text-align: center;
    cursor:pointer;
}

#guide_page .lunBo {
    margin: 0 auto;
    position: relative;
    width: 980px;
    z-index: 101;
    overflow: auto;
}
#guide_page .lunBo .con{
    width: 980px;
    height: 780px;
    overflow: hidden;
}
#guide_page .lunBo .con li {
    float:left;
    width: 980px;
    height: 780px;
    display:none;
}

#guide_page .lunBo .con li .top {
    position: absolute;
    left: 145px;
    top: 0;
}
#guide_page .lunBo .con li .top img{
    width:700px;
}

#guide_page .lunBo .con li .center {
    width: 500px;
    margin: 240px auto 0;
    text-align: center;
}

#guide_page .lunBo .con li .center .tit {
    font-family: PingFangSC-Medium;
    font-size: 36px;
    color: #FFFFFF;
    line-height:70px;
}

#guide_page .lunBo .con li .center .des {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
}
#guide_page .lunBo .con li .pic{
    width:725px;height:408px;
    margin:30px auto 10px;
}
#guide_page .lunBo .con li .pic img {
    width:725px;height:408px;
    box-shadow: 0 0 12px 4px rgba(101, 137, 221, 0.25);
}

/*鼠标按钮*/


#guide_page .direction {
    position:absolute;
    width:880px;
    height: 100px;
    left:50px;
    top:560px;
}

#guide_page .directiona {
    width: 30px;
    font: 30px bold 宋体;
    color: black;
    background: lightblue;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    z-index: 15;
    position: relative;
}

#guide_page .left {
    float: left;
}

#guide_page .right {
    float: right
}
#guide_page .close1 {
    float: right
}
/*小圆点*/
#guide_page  .point {
    width: 200px;
    margin: 30px auto 50px;
}
#guide_page .point span {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    border: 1px solid #FFFFFF;
    cursor: pointer;
    float: left;
    margin: 0 5px;
    position: relative;
    z-index: 15;
}

#guide_page .point .on {
    background: #FFFFFF;
}

<dhtml:
<d<div id="guide_page">
    <div class="bg"></div>
    <div id="close_btn">Close tips</div>
    <div class="lunBo" id="LunBo">
        <ul class="con">
            <li>
                <div class="center">
                    <h4 class="tit">Documents</h4>
                    <p class="des">In “Documents”, you can find all the materials that your mentee(s) has uploaded to the system. You can download and start your editing.</p>
                </div>
                <div class="pic"><img src="/files/mentor/images/tu1.png" alt="1" width="571" height="321" /></div>
            </li>
            <li>
                <div class="center">
                    <h4 class="tit">Activities</h4>
                    <p class="des">In “Activities”, you can find all the appointments that your mentee(s) makes or discover any new mentee has been assigned to you.</p>
                </div>
                <div  class="pic"><img src="/files/mentor/images/tu2.png" alt="2" width="571" height="321" /></div>
            </li>
            <li>
                <div class="center">
                    <h4 class="tit">Upload</h4>
                    <p class="des">In “Upload”, you can upload all the materials that you have finished editing. <br /></p>
                </div>
                <div  class="pic"><img src="/files/mentor/images/tu3.png" alt="3" width="480" height="270" /></div>
            </li>
            <li>
                <div class="center">
                    <h4 class="tit">My Mentee</h4>
                    <p class="des">In “My Mentees”, you will find all mentees under your mentorship. By clicking their name, you can check their relevant info.</p>
                </div>
                <div  class="pic"><img src="/files/mentor/images/tu4.png" alt="4" width="390" height="220" /></div>
            </li>
        </ul>
        <div class="point">
            <span class="yellow"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="direction">
            <a href="javascript:;" class="left"><img src="/files/mentee/images/left.svg" alt="1"></a>
            <a href="javascript:;" class="right"><img src="/files/mentee/images/rigth.svg" alt="2"></a>
            <a href="javascript:;" class="close1"><img src="/files/mentee/images/close1.svg" alt="3"></a>
        </div>
    </div>

　　

/**
 * Created by Wendy on 2018/8/27.
 */
js：
$(function(){
    if(getCookie('login')){
        $("#guide_page").hide();
    }
    var i=0;
    var size = $(".con li").length;
    // console.log(size);
    $(".lunBo .point span").first().addClass('on');
    $(".lunBo .con li").eq(0).show().siblings().hide();
    $(".direction .close1").hide();
    $(".direction .left").hide();
    //鼠标划入圆点
    $(".lunBo .point span").hover(function(){
        var index=$(this).index();
        i=index;
        $(".lunBo .con li").eq(i).show().siblings().hide();
        $(this).addClass('on').siblings().removeClass('on');
    })

    /*自动轮播*/
    // var t=setInterval(function(){
    //     i++;
    //     move();
    // },4000);

    //对lunBo定时器的操作
    // $("#LunBo").hover(function(){
    //     window.clearInterval(t)
    //     // clearInterval(t);
    // },function(){
    //     t=setInterval(move,4000);
    // })


    /*向左按钮*/
    $(".lunBo .left").click(function(){
        i--;
        move();
    })
    /*向右按钮*/
    $(".lunBo .right").click(function(){
        i++;
        move();
    })

    function move(){
        $(".direction .left").show();
        if(i==size){
            $(".lunBo .con li").eq(i).show().siblings().hide();
            $(".lunBo .point span").eq(i).addClass('on').siblings().removeClass('on');
            i=0;
        }
        if(i==-1){
            $(".lunBo .con li").eq(0).show().siblings().hide();
            $(".lunBo .point span").eq(0).addClass('on').siblings().removeClass('on');
            i=size-1;
        }
        // console.log(i);
        // console.log(size);
        if(i===size-1){
            $(".direction .right").hide();
            $(".direction .close1").show();
            $(".close1").click(function(){
                $("#guide_page").hide();
            })
        }else{
            $(".direction .close1").hide();
            $(".direction .right").show();
        }

        $(".lunBo .con li").eq(i).show().siblings().hide();
        $(".lunBo .point span").eq(i).addClass('on').siblings().removeClass('on');
    }
    function setCookie(name,value,day){
        var date = new Date();
        date.setDate(date.getDate() + day);
        document.cookie = name + '=' + value + ';expires='+ date;
    };
    //获取cookie
    function getCookie(name){
        var reg = RegExp(name+'=([^;]+)');
        var arr = document.cookie.match(reg);
        if(arr){
            return arr[1];
        }else{
            return '';
        }
    };
    $('#close_btn').click(function(){
        setCookie('login','aaaa',70);
        $("#guide_page").hide();
    })


})