京东轮播图是怎么实现的？京东轮播图代码_html-js-css

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

<!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>

总结

以上是内存溢出为你收集整理的京东轮播图是怎么实现的？京东轮播图代码全部内容，希望文章能够帮你解决京东轮播图是怎么实现的？京东轮播图代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1013041.html