上下轮播图

最新推荐文章于 2021-12-25 10:24:11 发布

十友九

最新推荐文章于 2021-12-25 10:24:11 发布

阅读量138

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_43778556/article/details/116790400

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        img{
            border: none;
        }
        body{
            background-color: #ecfaff;
        }
        .play{
            width: 470px;
            height: 150px;
            overflow: hidden;
            position: relative;
            margin: 150px auto 0;
        }
        ol{
            position: absolute;
            right: 5px;
            bottom: 5px;
            z-index: 2;
        }
        ol li{
            float: left;
            margin-right: 3px;
            display: inline;
            cursor: pointer;
            background-color: #fcf2cf;
            border: 1px solid #f4f500;
            padding: 3px 8px;
        }
        .active{
            padding: 3px 8px;
            font-weight: bold;
            color: #ffffff;
            background: #ffb442;
            position: relative;
            /* bottom: 2px; */
        }
        ul{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        ul li{
            width: 470px;
            height: 150px;
            float: left;
        }
        ul img{
            float: left;
            width: 470px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="play" id="play">
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <ul>
            <li><a href=""><img src="../images/01.jfif" alt=""></a></li>
            <li><a href=""><img src="../images/02.jfif" alt=""></a></li>
            <li><a href=""><img src="../images/03.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/04.jfif" alt=""></a></li>
            <li><a href=""><img src="../images/05.jfif" alt=""></a></li>
            <li><a href=""><img src="../images/01.jfif" alt=""></a></li>
        </ul>
    </div>
    <script src="../jquery/jquery.min.js"></script>
    <script>
        $(function(){
            var aBtns=$('#play ol li');
            var oUl=$('#play ul')
            var aLis=oUl.find('li')

            var iNow=0
            var timer=null
            aBtns.click(function(){
                iNow=$(this).index()
                tab()
            })
            $('#play').mouseenter(function(){
                clearInterval(timer)
            }).mouseleave(function(){
                timer=setInterval(function(){
                    iNow++
                    tab()
                },2000)
            })
            timer=setInterval(function(){
                iNow++
                tab()
            },2000)
            function tab(){
                aBtns.attr('class','').eq(iNow).attr('class','active')
                if(iNow==aBtns.length){
                    aBtns.eq(0).attr('class','active')
                }
                oUl.animate({
                    top:-150*iNow
                },500,function(){
                    // 判断是否是最后一张
                    if(iNow==aBtns.length){
                        iNow=0
                        oUl.css('top',0)
                    }
                })
                // document.title=iNow
            }
        })
    </script>
</body>
</html>

十友九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上下轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫