京东轮播图是怎么实现的？京东轮播图代码-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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

本篇文章给大家带来的内容是关于京东轮播图是怎么实现的？京东轮播图代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!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中文网。

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

广告：SSL证书一年128.66元起，点击购买~~~