初学jQuery（京东轮播图）

17-07-27 来源：[db:作者]
收藏我要投稿
初学jQuery（京东轮播图）。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--导入jQuery-->
        <script src="jquery/jquery.js"></script>
        <!--设置css样式-->
        <style>
            /*取消全部的默认样式*/
            *{
                margin: 0;
                padding: 0;
                border: 0;
            }
            ul{
                /*取消风格*/
                list-style: none;
            }
            /*设置大盒子的样式，根据轮播图片的大小来设置*/
            .box{
                /*设置宽*/
                width: 790px;
                /*设置长*/
                height: 340px;
                /*在显示器居中*/
                margin: 0 auto;
                /*距离上边界50px*/
                margin-top: 50px;
                /*加上了一个边框，不喜欢取消即可*/
                border: 1px solid black;
                /*设置的父级定位*/
                position: relative;
                /*设置的鼠标样式*/
                cursor: pointer;
            }
            /*设置图片列表的样式*/
            .box .img li{
                /*子集的定位*/
                position: absolute;
                left: 0;
                top: 0;
            }
            /*左右两边点击箭头的样式*/
            .box .imgLeft,.box .imgRight{
                /*设置箭头框的宽*/
                width: 25px;
                /*设置文本行高*/
                line-height: 50px;
                /*设置背景的颜色和透明度为.3，*/
                background: rgba(0,0,0,.3);
                /*设置箭头的颜色*/
                color: #fff;
                /*鼠标样式*/
                cursor: pointer;
            }
            /*设置左箭头的样式*/
            .box .imgLeft{
                /*定位*/
                position: absolute;
                left: 0;
                /*字体居中*/
                text-align: center; 
                /*距离顶部的距离根据主盒子来设置*/        
                top: 150px;
            }
            /*设置右箭头的样式*/
            .box .imgRight{
                /*定位*/
                position: absolute;
                right: 0;   
                text-align: center;         
                top: 150px;
            }
            /*设置鼠标进入时的样式*/
            .box .imgLeft:hover,.box .imgRight:hover{
                background: rgba(0,0,0,0.7);
            }
            /*设置rgba盒子的样式*/
            .page{
 
                background: rgba(255,255,255,0.3);
                position: absolute;
                bottom: 20px;
                left: 335px;
                width: 120px;
                height: 28px;
                /*设置圆角，根据你给定盒子的高度来设定*/
                border-radius: 14px;
                }
                /*指示位置的颜色*/
            .page .select{
                background: red;
            }
            /*设置盒子内部列表的样式*/
            .page li{
                /*设置为浮动*/
                float: left;
                height: 20px;
                width: 20px;
                border-radius: 10px;
                background: lightgrey;
                margin: 4px 5px;
            }
 
        </style>
        <script>
            //使用的是jQuery1.8.3
            $(function(){
                //定义一个变量用来记录图片换到的位置
                var count = 1;
                //设置图片的数量
                var imgMaxCount = 4;
                var imgMinCount = 1;
                //设置图片显示的时间毫秒
                var keep = 4000;
                //设置定时器，用于多长时间进行变化
                var times = setInterval(
                    timesCount,keep)
                //当鼠标进入大盒子的时候的定时器停止
                $('.box').on({
                    //鼠标进入盒子的时候停止计时器
                    mouseenter:function(){
                        clearInterval(times);
                    },
                    //鼠标移出盒子的时候开始计时
                    mouseleave:function(){
                        times = setInterval(
                    timesCount,keep);
                    }
                })
                function timesCount(){
                    count++;
                    counts();
                }
                //设置点击左右箭头时的变化
                $('.imgLeft,.imgRight').click(function(){
//                  三目表达式，判断时候点击imgLeft，是计数count减1，否则加1
                    count = this.className == 'imgLeft'? --count:++count;
                    counts()
                })
 
                //当点击page的时候跳转到点击位置
                $('.page ul li').click(function(){
                    //$(this)捕获点击的位置，addClass('select')添加class
                    //.siblings()它的兄弟属性.removeClass('select')去点class属性
                    $(this).addClass('select').siblings().removeClass('select');
                    //$(this).index()捕获点击的下标位置，下标从0开始计数
                    count = $(this).index() + 1;
                    counts();
                })
 
                //设置计数函数，用于控制图片轮播的位置
                function counts(){
                    //控制到达的位置，不能超过图片的最大限制和最小限制
                    //当超过最大量或者最小时候从第一张开始，或最后一张开始
                        if (count > imgMaxCount){
                        count = imgMinCount
                    }else if (count < imgMinCount){
                        count = imgMaxCount
                    }
                    //设置轮播的动画效果，图片变为透明
                    $('.box>.img>li').stop().animate({
                        opacity: 0  
                    })
                    //图片显示
                    $('.box>.img>li').eq(count - 1).stop().animate({
                        opacity:1
                    })
                    //page根据图片的改变显示的位置也变化
                    $('.page ul li').eq(count-1).addClass('select').siblings().removeClass('select');
                    }
            })
        </script>
    </head>
    <body>
        <!--定义一个轮播图装图片的大盒子-->
        <div class = 'box'>
            <!--放置需要播放的图片，想增加，增加li即可-->
            <ul class = 'img'>
                <li><img src="img/1.jpg"/></li>
                <li><img src="img/2.jpg"/></li>
                <li><img src="img/3.jpg"/></li>
                <li><img src="img/4.jpg"/></li>
            </ul>
            <!--设置轮播图的左右箭头-->
            <div class = 'imgLeft'>&lt;</div>
            <div class = 'imgRight'>&gt;</div>
            <!--设置轮播图下面的page-->
            <div class = 'page'>
                <ul>
                    <!--指示轮播图到达的位置-->
                    <li class = 'select'></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </body>
</html>
点击复制链接与好友分享!回本站首页