How is the JD carousel image implemented? Jingdong carousel image code-HTML Tutorial-php.cn

How is the JD carousel image implemented? Jingdong carousel image code

云罗郡主

Release： 2018-10-18 16:00:57

forward

4646 people have browsed it

The content of this article is about how JD carousel pictures are implemented? Jingdong carousel image code has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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

Copy after login

The above is how to implement JD carousel pictures? A full introduction to the JD carousel image code. If you want to know more about HTML video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How is the JD carousel image implemented? Jingdong carousel image code. For more information, please follow other related articles on the PHP Chinese website!