zoukankan      html  css  js  c++  java
  • 仿主题广告轮播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;  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>

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

  • 相关阅读:
    Cocos2d-js 开发记录:图片数据资源等的异步加载
    Cocos2d-js 开发记录:声音播放
    Cocos2d-js 开发记录-初始
    PAT 1064 Complete Binary Search Tree
    python 对象属性与 getattr & setattr
    LeetCode Text Justification
    LeetCode Valid Number
    LeetCode String to Integer (atoi)
    struts2--标签取值
    java--Hibernate实现分页查询
  • 原文地址:https://www.cnblogs.com/gawking/p/3578445.html
Copyright © 2011-2022 走看看