`
yangle926
  • 浏览: 56110 次
  • 性别: Icon_minigender_1
  • 来自: 洛阳
社区版块
存档分类
最新评论

ASP.NET+jQuery轮播效果

    博客分类:
  • .NET
阅读更多
<style type="text/css">
        #round_up_adv img{width:535px;height:212px;}  
        #round_up_adv #play_text{position:absolute;margin:188px 0 0 360px;height:20px;width:200px;z-index:1002}
        #round_up_adv #play_bg {position:absolute;background-color:#000;margin-top:180px;height:30px;width:535px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000}
        #round_up_adv #play_list a{display:block;width:535px;height:212px;position:absolute;overflow:hidden;float:left;}
    </style>
    <script type="text/javascript">
        var t = n = count = 0;
        $(function () {
            count = $("#play_list a").size();
            $("#play_list a:not(:first-child)").hide();
            $("#play_info").html($("#play_list a:first-child").find("img").attr('alt'));
            $("#play_text li:first-child").css({ "background": "#fff", 'color': '#000' });
            $("#play_info").click(function () { window.open($("#play_list a:first-child").attr('href'), "_blank") });
            $("#play_text li").click(function () {
                var i = $(this).text() - 1;
                n = i;
                if (i >= count) return;
                $("#play_info").html($("#play_list a").eq(i).find("img").attr('alt'));
                $("#play_info").unbind().click(function () { window.open($("#play_list a").eq(i).attr('href'), "_blank") })
                $("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
                $(this).css({ "background": "#8FE7F5", 'color': '#000' }).siblings().css({ "background": "#3783A3", 'color': '#ECF3FD' });
            });
            t = setInterval("showAuto()", 5000);
            $("#round_up_adv").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 2000); });
        })

        function showAuto() {
            n = n >= (count - 1) ? 0 : n + 1;
            $("#play_text li").eq(n).trigger('click');
        }
    </script>
<div id="round_up_adv">
            <div id="play_bg"></div>
        <div id="play_text">
        <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
                    <li>10</li>
        </ul>
        </div>
        <div id="play_list">
                <asp:Repeater ID="repPlayAdv" runat="server">
                    <ItemTemplate>
                        <a href='<%# Eval("LinkUrl") %>' target="_blank">
                            <img src='<%# Eval("ImageUrl") %>' title='<%# Eval("Title") %>' alt='<%# Eval("Title") %>' />
                        </a>
                    </ItemTemplate>
                </asp:Repeater>
        </div>           
        </div>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics