仿主题广告轮播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>
网站首页主题图片轮播效果。