仿主题广告轮播js

            function SlideShow(c) {
            var a = document.getElementById("slide");
            var f = document.getElementById("slide_Img").getElementsByTagName("li");
            var h = document.getElementById("slideBar");
            var n = h.getElementsByTagName("li");
            var d = f.length;
            var c = c || 3000;
            var e = lastI = 0, j, m;
            function b() {
                m = setInterval(function () {
                    e = e + 1 >= d ? e + 1 - d : e + 1;
                    g()
                }, c)
            }
            function k() {
                clearInterval(m)
            }
            function g() {
                f[lastI].style.display = "none";
                n[lastI].className = "";
                f[e].style.display = "block";
                n[e].className = "no";
                lastI = e
            }
            f[e].style.display = "block";
            a.onmouseover = k;
            a.onmouseout = b;
            h.onmouseover = function (i) {
                j = i ? i.target : window.event.srcElement;
                if (j.nodeName === "LI") {
                    e = parseInt(j.innerHTML, 10) - 1;
                    g()
                }
            };
            b()
        }

界面:

<div class="slide" id="slide">
                <div class="slideImg">
                    <ul id="slide_Img">
                        <asp:Repeater ID="Index_PosterCenter1_rpt" runat="server">
                            <ItemTemplate>
                                <li><a href="<%#Eval("") %>" style="border: none;" target="_blank" title="">
                                    <img src="SlideImg/slideImg_01.png" style="border: none; width: 510px; height: 250px;"
                                        alt="" />
                                </a></li>
                            </ItemTemplate>
                        </asp:Repeater>
                    </ul>
                </div>
                <div class="slideBar" id="slideBar">
                    <ul>
                        <li class="no">1</li>
                        <% for (int i = 1; i < 4; i++)
                           {
                        %>
                        <li>
                            <%=i+1 %></li>
                        <% }%></ul>
                    <div class="bg">
                    </div>
                </div>
                <script type="text/javascript">
                    SlideShow(3000);
                </script>
            </div>

网站首页主题图片轮播效果。

 

posted @ 2014-03-03 15:33  以便以谢  阅读(375)  评论(0编辑  收藏  举报