淘宝轮播图效果

来源：互联网发布：数据建模分析师编辑：程序博客网时间：2024/06/12 00:36
<!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;                /*益处盒子范围就隐藏掉*/                overflow: hidden;            }            /*设置.img列表的样式*/            .box .img{                /*将所有的图片放到一行*/                width: 4740px;                /*定位*/                position: absolute;                /*显示第一张图片*/                left: -790px;                top: 0;            }            /*清除浮动*/            .box .img:after{                content:'';                display:block;                clear:both;                height:0            }            /*设置图片列表的样式*/            .box .img li{                float: left;                width:790px;                height: 340px;            }            /*左右两边点击箭头的样式*/            .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 + 1){                        $('.box>.img').css({                            left:0                        })                        count = 1                    }else if (count <= imgMinCount - 1){                        $('.box>.img').css({                            left: -790 * 5                        })                        count = 4                    }                    //设置轮播的动画效果，图片变为透明                    $('.box>.img').stop().animate({                        left: -790*count                    })                    //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/4.jpg"/></li>                <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>                <li><img src="img/1.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>
阅读全文
0 0