JQuery轮播图（JD版）

最新推荐文章于 2023-03-30 22:06:06 发布

疯狂的自学者

最新推荐文章于 2023-03-30 22:06:06 发布

阅读量333

点赞数

分类专栏：学习的过程

本文链接：https://blog.csdn.net/weixin_41608454/article/details/79338364

版权

学习的过程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东轮播图</title>
    <script src="./jquery-1.12.4.js"></script>
    <style>
        /* 初始化 */
        ul,ol{
            margin:0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        img{
            height:300px;
            width:400px;
        }
        /* 设置父盒子 */
        .wrapper{
            height:300px;
            width:400px;
            margin:100px auto;
            position: relative;
        }
/*设置放置图片的区域 ul需要足够的宽度放下所有的图片 */
        .wrapper .navPic{
            position: absolute;
        }
        .wrapper .navPic .navPic-item{
            position: absolute;
            display: none;
        }
        .wrapper .navPic .navPic-item:first-child{
            display: block;
        }
        /* 设置左右滚动焦点 */
        .wrapper .arrow{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            width:100%;
            /* display: none; */
        }
        .arrowLeft,.arrowRight{
            display: block;
            height:40px;
            width:30px;
            background:rgba(0,0,0,.4);
            color:#fff;
            font-size:30px;
            font-family: '宋体';
            text-align: center;
            font-weight: bolder;
            line-height:40px;
        }
        .arrowLeft{
            float:left;
        }
        .arrowRight{
            float:right;
        }
        /* 设置小圆点 */
        .wrapper .point{
            position: absolute;
            bottom: 10px;
            left:50%;
            transform: translateX(-50%);
            background:rgba(255,255,255,0.4);
            border-radius: 10px;

        }
        .wrapper .point li{
            height:10px;
            width:10px;
            border-radius: 50%;
            background: #fff;
            margin:5px;
            float:left;
            cursor: pointer;
        }
        .wrapper .point li.active{
            background:red;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="navPic">
            <li class="navPic-item"><img src="http://m.360buyimg.com/babel/jfs/t16549/169/2001807237/89910/e5c6ef8f/5a7fa182Na786cdab.jpg" alt=""></li>
            <li class="navPic-item"><img src="http://img10.360buyimg.com/da/jfs/t18664/216/377923615/144632/38742576/5a70262cN0b5f8bd6.jpg" alt=""></li>
            <li class="navPic-item"><img src="http://img11.360buyimg.com/da/jfs/t13834/120/2302599229/196140/b15fe6af/5a38e2f2Nb1fa2f03.jpg" alt=""></li>
            <li class="navPic-item"><img src="http://m.360buyimg.com/babel/jfs/t16765/52/471564239/71582/335fb964/5a7d5e60Nb5190b6a.jpg" alt=""></li>
            <li class="navPic-item"><img src="http://img11.360buyimg.com/da/jfs/t19198/178/384261307/100278/a325be09/5a7134cfN50242ff7.jpg" alt=""></li>
        </ul>
        <div class="arrow">
            <a class="arrowLeft" href="javascript:void(0);"><</a>
            <a class="arrowRight" href="javascript:void(0);">></a>
        </div>
        <ol class="point">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
        $(function(){
            var $ul=$('.navPic'),
                $uLi=$('.navPic>.navPic-item'),
                $arrowLeft=$('.arrowLeft'),
                $arrowRight=$('.arrowRight'),
                $oLi=$('ol>li'),
                $width=400,
                index=0,
                timer;
            $oLi.on('mouseover',function(e){
                $(this).addClass('active').siblings().removeClass('active');
                index=$(this).index();
                $uLi.eq(index).fadeIn().siblings().fadeOut();
            });
            $arrowRight.on('click',function(e){
                index++;
                if(index >= 5){
                    index=0;
                }
                $uLi.eq(index).fadeIn().siblings().fadeOut();
                if(index == $uLi.length){
                    $oLi.eq(0).addClass('active').siblings().removeClass('active');
                }else{
                    $oLi.eq(index).addClass('active').siblings().removeClass('active');
                }
            });
            $arrowLeft.on('click',function(e){
                index--;
                if(index < 0){
                    index=4;
                }
                $uLi.eq(index).fadeIn().siblings().fadeOut();
                if(index == $uLi.length){
                    $oLi.eq(0).addClass('active').siblings().removeClass('active');
                }else{
                    $oLi.eq(index).addClass('active').siblings().removeClass('active');
                }
            });
            timer=setInterval(function(e){
                $arrowRight.click();
            },2000)
            $('.wrapper').on('mouseover',function(e){
                clearInterval(timer);
            });
            $('.wrapper').on('mouseleave',function(e){
               timer=setInterval(function(e){
                $arrowRight.click();
               },2000);
            });
        })
    </script>
</body>
</html>