您的位置 首页 html教程

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

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

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

以上就是京东轮播图是怎么实现的?京东轮播图代码的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:京东轮播图是怎么实现的?京东轮播图代码

文章地址:https://www.pyhw.net/34002_%e4%ba%ac%e4%b8%9c%e8%bd%ae%e6%92%ad%e5%9b%be%e6%98%af%e6%80%8e%e4%b9%88%e5%ae%9e%e7%8e%b0%e7%9a%84%ef%bc%9f%e4%ba%ac%e4%b8%9c%e8%bd%ae%e6%92%ad%e5%9b%be%e4%bb%a3%e7%a0%81.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图