jq轮播图,一组数据轮播,自动生成小点点

先展示效果


可点击小点点轮播和箭头轮播。小点点自动生成。

直接贴上代码:

html:

 

                            

                                

                                    

                                        

  •                                             

                                            

  •                                         

  •                                             

                                            

  •                                         

  •                                             

                                            

  •                                         

  •                                             

                                            

  •                                         

  •                                             

                                            

  •                                         

  •                                             

                                            

  •                                         

  •                                             

                                            

  •                                         

  •                                             

                                            

  •                                         

  •                                             

                                            

  •                                         

  •                                             

                                            

  •                                         

  •                                             

                                            

  •                                         

  •                                             

                                            

  •                                     

                                    

                                    

                                        

                                            

                                        

                                        

                                            

                                        

                                        

                                            

                                        

                                    

                                

                            

    css:

    /* 轮播样式 */

    .boung_des{

        width: 800px;

        border: 1px solid #eeeeee;

        padding: 30px 50px 60px;

    }

    .bough-pics{

        width: 700px;

        height: 100px;

        position: relative;

        white-space:nowrap;

        overflow: hidden;

    }

    .bough-pics>ul{

        font-size: 0;

        position: absolute;

        top: 0;

        left: 0;

        width: 10000px;

    }

    .bough-pics>ul>li{

        float: left;

        width: 100px;

        height: 100px;

        border: 1px solid #eeeeee;

        overflow: hidden;

        margin-right: 50px;

        display: inline-block;

    }

    .bough-pics>ul>li>img{

        max-width: 100%;

        max-height: 100%;

    }

    .bough-little{

        text-align: center;

        margin-top: 20px;

    }

    .bough-little span{

        margin: 0 18px;

        display: inline-block;

        vertical-align: middle;

    }

    .bough-little span em{

        float: left;

        margin-right: 8px;

        width: 11px;

        height: 11px;

        border: 1px solid #b4b4b4;

        border-radius: 50%;

        cursor: pointer;

        text-indent: 9999px;

    }

    .bough-little span em>:last-child{

        margin-right: 0;

    }

    .bough-pics>ul>li:nth-child(5n){

        margin-right: 0;

    }

    js:

    $(function () {

        var picLength = $(".bough-pics>ul>li").length;

        var index = 0;

        // 右边

        $(".bought-list>ul>li .next").click(function () {

            index++;

            if (index > picLength / 5) {

                index = 0;

                $(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({

                    "left": '0px'

                }, 500)

            }

            $(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({

                'left': -700 * index

            }, 500);

            circleChange();

        });

        // 左边

        $(".bought-list>ul>li .prev").click(function () {

            index--;

            if (index < 0) {

                index = picLength / 5;

                $(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({

                    "left": -700 * Math.floor(index)

                }, 500)

            }

            $(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({

                'left': -700 * Math.floor(index)

            }, 500);

            circleChange();

        });

        // 动态生成小点点

        var picData = $(".bough-pics>ul>li");

        var html = '';

        for (var i = 0; i < picData.length; i++) {}

        var data_suo = Math.ceil(i / 5);

        for (var i = 0; i < data_suo; i++) {

            html += '' + i + ''

            $('.bough-little span').html(html);

        }

        // 小圆点点击

        $(".bough-little span em").each(function (i) {

            $(this).click(function () {

                index = i;

                $(this).parents(".bough-little").siblings(".bough-pics").find("ul").animate({

                    "left": -700 * index

                }, 500);

                circleChange();

            });

        });

        // 监听小点点的变化

        function circleChange() {

            var id_b = index;

            if (id_b > picLength / 5) {

                id_b = 0;

            }

            $(".bough-little span em").eq(parseInt(id_b)).addClass("dyui-bk dyui-br").siblings("em").removeClass("dyui-bk dyui-br");

        }

        circleChange();

    })

    你可能感兴趣的:(jq轮播图,一组数据轮播,自动生成小点点)