`
yangle926
  • 浏览: 58084 次
  • 性别: 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>
分享到:
评论

相关推荐

    ASP.NET写的轮播图代码页面

    在ASP.NET中创建一个轮播图,通常是为了在网页上展示一系列图像或内容,这种交互式的设计元素能够吸引用户注意力,增加网站的视觉吸引力。轮播图通常包含多个滑块,每个滑块可以显示一张图片、一段文字或其他多媒体...

    ASP.NET+JS图片轮换代码

    在ASP.NET中,通常会用到服务器控件如Image或ImageList来处理图片,并结合JavaScript或者jQuery库(如jQuery Cycle或Swiper)来实现前端的动态效果。 以下是这个主题中涉及的关键知识点: 1. **ASP.NET服务器控件*...

    asp.net+javascript经典页面特效

    对于ASP.NET开发者来说,学习和掌握JavaScript和jQuery等库是非常有帮助的,因为它们简化了跨浏览器的兼容性问题,并提供了丰富的API用于页面操作。 总的来说,"asp.net+javascript经典页面特效"是网页开发中的一个...

    asp.net+Flash动态图片切换演示

    总结来说,"asp.net+Flash动态图片切换演示"项目展示了如何结合ASP.NET的服务器端处理能力和Flash的动画效果,创建一个动态图片轮播组件。这涵盖了服务器端编程、前端交互设计和客户端动画等多个技术层面,对于理解...

    Packt.ASP.NET.jQuery.Cookbook.Incl.Source.Code

    7. **jQuery插件与ASP.NET**:许多第三方jQuery插件可以增强ASP.NET应用的功能,如表单验证、日期选择器、轮播图等,书中的源代码可能会包含这些插件的集成示例。 8. **源代码分析**:提供的源代码文件(ASP.NET....

    jQuery教程(ASP.NET)

    jQuery拥有丰富的第三方插件,如Bootstrap的弹出框、轮播图,以及DataTables、DatePicker等,这些插件能进一步提升ASP.NET应用程序的用户体验。 总结,jQuery与ASP.NET的结合使用,不仅可以提升网页的性能,还能让...

    C# ASP.NET jQuery - jCarousel控件图片动态浏览

    在这个场景中,"C# ASP.NET jQuery - jCarousel控件图片动态浏览"是一个关于如何利用这些技术实现图片轮播功能的主题。下面将详细介绍这个知识点。 首先,C# ASP.NET是一个微软开发的服务器端Web应用框架,用于构建...

    asp.net网站开发 图片轮换

    虽然ASP.NET提供了丰富的服务器端功能,但为了实现动态效果,我们需要借助客户端脚本,如JavaScript或jQuery。在网页的头部或者底部添加jQuery库,然后编写一段脚本来监听页面加载事件,并调用C#的后台方法来获取...

    Packpub Asp.Net Jquery cookbook

    《Packpub Asp.Net Jquery cookbook》是一本专注于ASP.NET与jQuery结合使用的实践指南,英文版为读者提供了全面且深入的教程。这本书旨在帮助开发者利用jQuery优化ASP.NET应用程序的前端交互,提高用户体验,并简化...

    ASP.NET jQuery Cookbook By Sonal Aneel Allana (code).rar

    7. **jQuery插件使用**:jQuery社区提供了大量的插件,如日期选择器、分页导航、轮播图等,这些插件可以快速增强ASP.NET应用的功能。 8. **响应式设计**:jQuery可以帮助开发者实现响应式布局,确保ASP.NET应用在...

    .net+js做的向上向下无空隙滚动的例子

    这种效果通常应用于新闻滚动、广告展示或者图片轮播等场景,使得内容能够连续且平滑地滚动,提供良好的用户体验。下面将详细介绍如何利用.NET和JavaScript来实现这一功能。 首先,我们需要理解.NET与JavaScript的...

    ASP.NET源码——JQuery功能测试源码.zip

    ASP.NET和jQuery是Web开发中的两个重要组成部分。ASP.NET是由微软开发的一个强大的服务器端框架,用于构建动态网站、Web应用程序和服务。而jQuery则是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、...

    ASP.NET图片切换动态版

    ASP.NET图片切换动态版是一个基于微软的ASP.NET技术开发的Web应用程序,主要用于实现网页上的图片轮播效果。这个项目可能是由Visual Studio 2005(VS2005)开发工具构建的,一个早期但仍然广泛使用的版本,用于创建...

    asp.net图片滑动效果

    ASP.NET图片滑动效果是网页设计中常见的动态展示方式,常用于产品展示、新闻轮播等场景,类似于淘宝主页顶部的广告轮播图。在ASP.NET框架下,我们可以利用多种技术来实现这一功能,比如使用AJAX、jQuery库或者自定义...

    ASP程序设计_asp.net_

    ASP.NET开发者需要掌握如何在服务器端和客户端之间传递数据,以及如何使用JavaScript和CSS来实现动画效果。 5. **浏览器测试组件**:在多浏览器环境下确保应用程序兼容性是一项挑战。ASP.NET提供了多种工具和策略,...

    ASP.NET项目-微博(MVC)

    在该项目中,jQuery可能用于实现页面的动态更新、用户交互效果,比如轮播图的自动切换、微博的分页加载等。同时,jQuery可以与Ajax结合,实现在不刷新页面的情况下,向服务器发送请求,如登录验证、发布微博等操作。...

    asp.net新闻图片切换效果

    ASP.NET中的新闻图片切换效果主要涉及前端JavaScript/jQuery技术和后端数据处理。你可以根据实际需求,选择是否在服务器端处理图片数据,以及如何定制图片切换的样式和交互。通过以上步骤,你应该能够创建一个基本的...

    ASP.NET中几种有用的特效

    2. **轮播图**:在ASP.NET中,可以使用JQuery插件如Bootstrap的Carousel或者Slick等,创建出引人注目的轮播图效果。这些插件通常支持自动切换、箭头导航和指示点,为网站增添视觉吸引力。 3. **模态对话框**:使用...

    ASP.NET邻家小厨社区网站(Web)

    【ASP.NET邻家小厨社区...对于学习和提升C#、ASP.NET、JavaScript和jQuery的人来说,这是一个非常有价值的实践案例。通过深入研究和分析这个项目,开发者可以更好地理解和掌握Web应用开发的全貌,从而提升自己的技能。

    ASP.NET Bootstrap4 网站模板

    4. **JavaScript插件**:模板可能包含了一些基于jQuery的Bootstrap插件,如轮播图、模态对话框和折叠内容,这些插件能够增加网站的交互性和动态效果。 5. **文档说明**:通常,这样的模板会附带详细的使用指南和API...

Global site tag (gtag.js) - Google Analytics