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

互联网 18-10-18

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

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

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

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：实现代码