仿主题广告轮播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>

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

 

你可能感兴趣的:(js)