仿主题广告轮播js

时间:2023-03-09 01:05:13
仿主题广告轮播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>

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