JQuery轮播图（JD版）

向右看齐 2022-05-31 09:54 219阅读 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>