京东轮播图是怎么实现的？京东轮播图代码-html教程-PHP中文网

首页

web前端

html教程

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

云罗郡主

Oct 18, 2018 pm 02:29 PM

实现代码

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

<!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中文网其他相关文章！

声明

本文转载于：csdn。如有侵权，请联系admin@php.cn删除

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。