Js-图片轮循播放

效果如图：

1：view页面代码如下：

     <ul>  这里面会在初始化的时候添加图片</ul>   

@*详细图片*@
        <div class="fullSlide" style="margin-top:28px">
            <div class="bd">
                <ul>
 
                </ul>
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-image" role="button" data-slide="prev">
                    <span class="arrowLeft"></span>
                </a>
                <a class="right carousel-control" style="right:18%" href="#carousel-image" role="button" data-slide="next">
                    <span class="arrowRight"></span>
                </a>
            </div>

            <div class="hd"><ul></ul></div>
        </div>

注意：Js初始化把图片填充到  ul 中 

// 初始化
   $.ajax({
            type: "POST",
            url: '@Url.Action("GetBrandInfoPicList", "BrandInfo")',
            traditional: true,
            data: {
                BrandCode: @Model.BrandCode,
                BrandType: '1',
            },

            success: function (data) {
                console.log($(".fullSlide .bd ul")[0].outerHTML)
                $(".fullSlide .bd ul")[0].outerHTML = '<ul></ul>'
                for (var i = 0; i < data.lstResult.length; i++) {
                    $(".fullSlide .bd ul").prepend('<li _src="url(/' + data.lstResult[i].PicPath + ')" style="background:#FFFFFF center 0 no-repeat;"> </li>')

                }
            },
              complete: function () {
                  fullSlideMain();
            }
        });

 

2:CSS  代码：

.arrowLeft {
        position: relative;
        position: absolute;
        border: 10px solid transparent;
        border-right: 10px solid #fff;
        right: 17px;
        top: 10px;

}

 .arrowRight {
        position: absolute;
        left: 17px;
        top: 10px;
        border: 10px solid transparent;
        border-left: 10px solid #fff;

}

 

 

3：js代码

    $(".fullSlide").hover(function () {
        $(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
    },function () {
        $(this).find(".prev,.next").fadeOut()
        });

function fullSlideMain() {
        $(".fullSlide").slide({
            titCell: ".hd ul",
            mainCell: ".bd ul",
            effect: "fold",
            autoPlay: true,
            autoPage: true,
            trigger: "click",
            interTime: 20000,
            prevCell: ".arrowLeft",
            nextCell: ".arrowRight",
            startFun: function (i) {
                var curLi = jQuery(".fullSlide .bd li").eq(i);
                if (!!curLi.attr("_src")) {
                    curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
                }
                var total = $(".bd li").length;
                var page = i + 1;
                $(".hd ul").html('<span>' + page + ' / ' + total + '</span>');
            }
        });                                        //document.domain == "126.com";
    }
    fullSlideMain();