选项卡中图片切换问题

狂飚 2015-06-25 11:59:23

我有一个控件：



<%for (int i = 0; i < ChannelList.Count; i++)

          {

              string style = "";%>

        <% if (i == 0) { style = "display:block"; } else { style = "display:none"; }%>

        

        <div id="n4Tab<%=iResult%>_Content<%=i%>" style="<%= style%>; <%=SetBoxBorderColor()%>" class="TabContent">

            <%--图片插件--%>

            <div class="flash-box">

                <div class="big-pic" id="SwitchBigPic">

                    <% 

                        foreach (Article article in AllKindArticlet[i])

                        { %>

                            <a href="<%=article.Url %>" target="_blank">

                                <img src="<%=article.Thumbnail %>" width="347" height="260" border="0" alt="" />

                            </a>

                            <span>

                	            <a href="<%=article.Url %>" target="_blank"><%=ToStr(article.Title, 10)%></a>

                            </span>

                    <%} %>

                </div>

                <div class="pic-list_0810">

                    <div id="ul_recom">

                        <% int j = 0;

                           foreach (Article article in AllKindArticlet[i])

                           {

                               string cc = i.ToString();

                               string dd = j.ToString();

                               string ee = cc + dd;

                               int c = int.Parse(ee);

                               %>

                        <a href="<%=article.Url %>" id="SwitchSmaPic_<%=c %>" target="_blank">

                            <img src="<%=article.Thumbnail %>" width="94" height="63" border="0" alt="" /></a>

                        <% j++;

                           } %>

                    </div>

                </div>

            </div>

            <% } %>



<script type="text/javascript">

                    var IndexRecom = {

                        bigpic: "SwitchBigPic", //大图DIV之ID通用部分	

                        step: 277,

                        smallpic: "SwitchSmaPic", //小图之ID通用部分

                        selectstyle: "currA", //小图被选中之后的CSS

                        pictxt: "", //配套图片文字

                        totalcount: 4, 				//图片数量	

                        autotimeintval: 6000,

                        objname: "IndexRecom"	//对象名称		

                    };	

            </script>



            <script type="text/javascript">          

                    BigNews.init(IndexRecom);

            </script>

然后JS文件是这样的：



var B = BigNews = {

    current: 0,

    next: 0,

    scrollInterval: 0,

    autoScroller: 0,

    smallpic: "SwitchSmaPic"

};

BigNews.turn = function (index, obj) {

    clearInterval(BigNews.autoScroller);

    BigNews.scroll(index, obj);

}

BigNews.scroll = function (index, obj) {

    if (obj.smallpic == null || obj.smallpic == "") {

        clearInterval(BigNews.autoScroller);

        return;

    }

    var count = 0;

    var step = obj.step;

    var duration = 16;

    var b = BigNews;

    b.next = index;



    if (index == b.current) {

        return;

    }



    /*if(index < SmallNews.current){

    SmallNews.go(SmallNews, index);

    } else if (index - 3 >= SmallNews.current) {

    SmallNews.go(SmallNews, index - 3);

    }*/



    clearInterval(b.scrollInterval);

    for (var i = 0; i < obj.totalcount; i++) {

        $("#" + obj.smallpic + "_" + i).attr("class", "");

        if (obj.pictxt != null && obj.pictxt != "")

            $("#" + obj.pictxt + "_" + i).css("display", "none");

    }

    $("#" + obj.smallpic + "_" + index).attr("class", obj.selectstyle);

    if (obj.pictxt != null && obj.pictxt != "")

        $("#" + obj.pictxt + "_" + index).css("display", "block");

    var span = index - b.current;

    var begin_value = $("#" + obj.bigpic).attr("scrollTop");

    var chang_in_value = span * step + (b.current * step - begin_value);

    b.scrollInterval = setInterval(function () { doit(begin_value, chang_in_value) }, 10);

    function doit(b, c) {

        $("#" + obj.bigpic).attr("scrollTop", cpu(count, b, c, duration));

        count++;

        if (count == duration) {

            clearInterval(BigNews.scrollInterval);

            scrollInterval = 0;

            count = 0;

            $("#" + obj.bigpic).attr("scrollTop", b + c);

            BigNews.current = index;

        }

    }

    function cpu(t, b, c, d) { return c * ((t = t / d - 1) * t * t + 1) + b; };

}

BigNews.auto = function (obj) {

    //clearTimeout(BigNews.autoScroller);

    clearInterval(BigNews.autoScroller);

    BigNews.autoScroller = setInterval(function () {

        BigNews.scroll(BigNews.current == (obj.totalcount - 1) ? 0 : BigNews.current + 1, obj);

    }, obj.autotimeintval);

}

BigNews.pauseSwitch = function () {

    //clearTimeout(BigNews.autoScroller);

    clearInterval(BigNews.autoScroller);

}

BigNews.init = function (obj) {



    $("#" + obj.bigpic).mouseover(new Function("BigNews.pauseSwitch();"));

    $("#" + obj.bigpic).mouseout(new Function("BigNews.auto(" + obj.objname + ");"));

    for (i = 0; i < obj.totalcount; i++) {

        if (obj.smallpic != null && obj.smallpic != "") {

            $("#" + obj.smallpic + "_" + i).mouseover(new Function("BigNews.turn(" + i + "," + obj.objname + ");BigNews.pauseSwitch();"));

            $("#" + obj.smallpic + "_" + i).mouseout(new Function("BigNews.auto(" + obj.objname + ");"));

        }

    }

    BigNews.smallpic = obj.smallpic;



}