用js 给Repeater每三行加一张图片，3组图片循环

定义一个repeater：   

 <asp:Repeater runat="server" ID="rAllnews"  >

                    <ItemTemplate>
                   <div class="msg1" >//给repeater里面的内容添加样式
                   <div id="img" runat="server"></div>//放一个空的div,放图片
                       <a href='<%#"http://ninja.o4games.com"+DataBinder.Eval(Container.DataItem, "url")%>'  title='<%#DataBinder.Eval(Container.DataItem, "title")%>' class="big_title">
                      <%#DataBinder.Eval(Container.DataItem, "title") %></a>
                      <div class="small_title"></div>
                      <div class="times"><%#Convert.ToDateTime(DataBinder.Eval(Container.DataItem, "addDate")).Month + "/" + Convert.ToDateTime(DataBinder.Eval(Container.DataItem, "addDate")).Day + "/" + Convert.ToDateTime(DataBinder.Eval(Container.DataItem, "addDate")).Year%></div>
                     <div class="line"></div>
                 
               </div>
                    </ItemTemplate>

                </asp:Repeater>

样式部分

<style type="text/css">
.img1{ width:110px;height:90px; background:url(http://ninja.o4games.com/images/new_tu.jpg) no-repeat;border-radius:14px;border:1px solid #6f1e00;transition:0.2s;cursor:pointer;}
.img2{ width:110px;height:90px; background:url(http://ninja.o4games.com/images/pic_3.jpg) no-repeat;border-radius:14px;border:1px solid #6f1e00;transition:0.2s;cursor:pointer;}
.img3{ width:110px;height:90px; background:url(http://ninja.o4games.com/images/pic_4.jpg) no-repeat;border-radius:14px;border:1px solid #6f1e00;transition:0.2s;cursor:pointer;}
.img1:hover{ border:1px solid #ffae00;transition:0.2s;}
.img2:hover{border:1px solid #ffae00;transition:0.2s;}
.img3:hover{border:1px solid #ffae00;transition:0.2s;}
.nr_bg .center .right .big_news .news_nr .nr2 .box .msg1:hover .img1{border:1px solid #ffae00;transition:0.2s;}
.nr_bg .center .right .big_news .news_nr .nr2 .box .msg1:hover .img2{border:1px solid #ffae00;transition:0.2s;}
.nr_bg .center .right .big_news .news_nr .nr2 .box .msg1:hover .img3{border:1px solid #ffae00;transition:0.2s;}


</style>

js部分：

<script language="javascript">

function getByClass(sClass) {//这个方法是通过一个类名称
        var aResult = [];
        var aEle = document.getElementsByTagName('*');//JavaScript通过class获取元素
 for (var i = 0; i < aEle.length; i++) {
            /*当className相等时添加到数组中*/
            if (aEle[i].className == sClass) {
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    };

    window.onload = function () {
        var aBox = getByClass("msg1"); //获取到总行数目，传入msg1获取他和他同级的同名div,因为Repeater的 <ItemTemplate>自动循环，所有有多少行数据就有多少个msg1


        for (var i = 1; i <= aBox.length; i++) {//循环行数
            if (9 * (i - 1) >= 9 * (i - 1) && 9 * (i - 1) <= 2 + (9 * (i - 1))) {//这是一个算法，1到3为一张图片，4到6又是一张图片7到9为第三张图片，这位第一组。第二组循环第一组
                for (var j = 0; j <= 2; j++) {//1到3为一组图片j为下标
                    $("#ContentPlaceHolder1_rAllnews_img_" + (j+(i-1)*9)).addClass("img1");通过动态添加div样式来添加图片
                }
                }
            if (3 + (i - 1) * 9 >=3 + (i - 1) * 9 && 3 + (i - 1) * 9 <= 5 + (i - 1) * 9) {
                for (var j = 3; j <= 5; j++) {
                    $("#ContentPlaceHolder1_rAllnews_img_"+(j+(i-1)*9)).addClass("img2");
                }
            }
            if (6 + (i - 1) * 9 >= 6 + (i - 1) * 9 && 6 + (i - 1) * 9 <= 8 + (i - 1) * 9) {
                for (var  j= 6;j<=8; j++) {
                    $("#ContentPlaceHolder1_rAllnews_img_" + (j +(i-1) * 9)).addClass("img3");
                }
            
            }
        
            //alert(aBox[i].innerHTML);
        }
    };

</script>

以下图片为实例部分