Comment l'image carrousel JD est-elle implémentée ? Code image du carrousel de Jingdong-tutoriel HTML-php.cn

Comment l'image carrousel JD est-elle implémentée ? Code image du carrousel de Jingdong

云罗郡主

Libérer： 2018-10-18 16:00:57

avant

4693 Les gens l'ont consulté

Le contenu de cet article concerne la façon dont les images du carrousel JD sont implémentées ? Le code d'image du carrousel de Jingdong a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

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

Copier après la connexion

Ce qui précède est de savoir comment implémenter l'image du carrousel JD ? Une introduction complète au code d'image du carrousel JD. Si vous souhaitez en savoir plus sur le Tutoriel vidéo HTML, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!