京东轮播图是怎么实现的？京东轮播图代码

!DOCTYPE htML>
    html>
    head>
        meta charset="UTF-8">
        tITle>
    Title/title>
        style>
        body,ul,li{
    padding:0;
    margin:0;
}
        li{
    list-style-type:none;
}
        .wrap{
                position:relative;
                width:480px;
                height:260px;
                margin:100px auto;
        }
            .wrap>
    ul>
li{
    position:absolute;
    display:none;
}
        /*隐藏所有的li*/        .wrap img{
    width:480px;
    height:260px;
}
        .wrap li:First-child{
    display:block;
}
/*显示第一个*/        .arrow{
                width:480px;
                height:60px;
                position:absolute;
                top:50%;
                margin-top:-30px;
                display:none;
        }
            .arrow>
span{
               font-Size:24pt;
                line-height:60px;
                display:inline-block;
                width:36px;
                background-color:#CEE5E8;
                text-align:center;
                cursor:pointer;
                opacity:0.5;
                border-radius:5px;
    /*显示圆框*/            -webkit-border-radius:5px;
                -moz-border-radius:5px;
                color:black;
        }
        .wrap:hover .arrow{
                display:block;
        }
            .arrow>
span:last-child{
                float:right;
        }
        /style>
    /head>
    body>
    div>
        !--图片部分-->
        ul>
            li>
                a href="javascript:void(0)">
                    img src="images/1.jpg"/>
                /a>
            /li>
            li>
                a href="javascript:void(0)">
                    img src="images/2.jpg"/>
                /a>
            /li>
            li>
                a href="javascript:void(0)">
                    img src="images/3.jpg"/>
                /a>
            /li>
            li>
                a href="javascript:void(0)">
                    img src="images/4.jpg"/>
                /a>
            /li>
        /ul>
        !--按钮部分-->
        div>
            span>
    /span>
            span>
    >
    /span>
        /div>
    /div>
    /body>
    script src="jquery-1.12.0.min.js">
    /script>
    script>
    $(function(){
            VAR count = 0;
        function change() {
                count++;
                if( count == $(".wrap>
    ul>
li").length){
                    count = 0;
            }
                $(".wrap>
    ul>
    li").eq(count).fadeIn().siblings("li").fadeOut();
        }
           var myTimer = setInterval(change,4000);
        function reRun(){
               myTimer = setInterval(change,4000);
        }
            /*注意jquery中setInterval函数不要加引号和(),否则会报缺少对象*/        $(".arrow>
span").eq(0).click(function(){
                clearInterval(myTimer);
                /*清除计时器，目的在于不会因点击按钮时setInterval事件仍旧执行*/            count--;
            if( count == -1){
                    count = $(".wrap>
    ul>
    li").length - 1;
            }
                $(".wrap>
    ul>
    li").eq(count).fadeIn().siblings("li").fadeOut();
                setTimeout(reRun,0);
            /*重新启动计时器，保证不点击按钮是能正常切换*/        }
    );
            $(".arrow>
span").eq(1).click(function(){
                clearInterval(myTimer);
                count++;
                if( count == $(".wrap>
    ul>
li").length){
                    count = 0;
            }
           $(".wrap>
    ul>
    li").eq(count).fadeIn().siblings("li").fadeOut();
                setTimeout(reRun,0);
        }
    );
    }
    );
    /script>
    /html>
    

以上就是对京东轮播图是怎么实现的？京东轮播图代码的全部介绍，如果您想了解更多有关HTML视频教程，请关注PHP中文网。

以上就是京东轮播图是怎么实现的？京东轮播图代码的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！