banner 效果的实现的CSS
/*Download by http://www.codefans.net*/ div { padding:0px; margin:0px; } #mainContainer a{ text-decoration:none; color:#663300; border:0; cursor:pointer; width:15px; } #mainContainer a:hover{ text-decoration:none; color:red; border:0; cursor:pointer; width:15px; } #mainContainer img { border:0; } .slideshow li { display:inline; } #mainContainer h2{ border-top:1px solid silver; padding-top:20px; } #header { height:236px; } #topSection { padding-top:10px; margin-bottom:20px; } #topInfo { font-size:18px; color:#333; margin:0px 0px 20px 0px; } #bottomInfo { font-size:14px; color:#663300; width:400px; } #headerContent { position:absolute; margin-left:320px; margin-top:36px; visibility:hidden; z-index:2; } #howdy { float:left; position:absolute; padding-left:230px; visibility:hidden; width:200px; height:94px; } #howdyImg { height:90px; width:200px; } .codeContainer { float:left; margin-right:20px; width:31%; } #evNetBar { height:26px; background-color:#666; visibility:collapse; } #mainContainer { width:100%; margin:0px; } #mainContainer h3 { font-size:18px; }
/* begin: slideshow Download by http://www.codefans.net*/ .slideshow { position:relative; padding:0; margin:0; height:350px } .slideshow a img { border:none; } .slideshow li.slide { list-style-type:none; } .slideshow .slides { height:260px; margin:0; } .slideshow .slides li.slide { visibility:hidden; position:absolute; left:0px; top:0; } .slideshow .buttons { display:none; } .slideshow .buttons { display:block; position:absolute; z-index:100; left:0px; bottom:5px; margin-left:20px; } .slideshow .buttons li { float:left; display:inline; width:20px; height:30px; margin:0; padding-left:11px; line-height:30px; background-image:url('../images/buttonBg.png'); background-repeat:no-repeat; } .slideshow .buttons li a { float:left; text-decoration:none; width:30px; height:30px; color:#fff; outline:0; } .slideshow ul.buttons li a:hover { text-decoration:none; color:#0a0a0a; } .slideshow ul.buttons li.active a:hover, .slideshow ul.buttons li.active a { color:#666666; } /* end: slideshow */
js 文件
//Microsoft.Glimmer.OneWay //<AnimationCollection FilePath="G:myprojects ribe2glimmerGlimmerglimmerUIglimmerUIsamplesjsanner.html.glimmer.js" xmlns="clr-namespace:GlimmerLib;assembly=GlimmerLib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><Animation Name="button1_click" EventType="click" Trigger="#button1"><Animation.Targets><Target Name=".slide" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="ModifyCSS" MaxValue="5000" MinValue="-5000" From="0" To="hidden" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#image1" Duration="300" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="ModifyCSS" MaxValue="5000" MinValue="-5000" From="0" To="visible" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /><OpacityEffect CSSName="opacity" DisplayName="Opacity Effect" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="ul.buttons li" Duration="1000" Easing="linear" Callback="null"><Target.Effects><RemoveCSSClassEffect CSSName="active" DisplayName="Remove CSS Class" MaxValue="0" MinValue="0" From="0" To="0" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).removeClass({1});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#button1" Duration="1000" Easing="linear" Callback="null"><Target.Effects><AddCSSClassEffect CSSName="active" DisplayName="Add CSS Class" MaxValue="0" MinValue="0" From="0" To="0" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).addClass({1});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /><TimerEffect CSSName="button2_click" DisplayName="Timer" MaxValue="10000" MinValue="1" From="0" To="3000" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="clearTimeout(timer);
 timer = setTimeout(eval({1}),{2});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="button2_click" EventType="click" Trigger="#button2"><Animation.Targets><Target Name=".slide" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="ModifyCSS" MaxValue="5000" MinValue="-5000" From="0" To="hidden" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#image2" Duration="300" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="ModifyCSS" MaxValue="5000" MinValue="-5000" From="0" To="visible" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /><OpacityEffect CSSName="opacity" DisplayName="Opacity Effect" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="ul.buttons li" Duration="1000" Easing="linear" Callback="null"><Target.Effects><RemoveCSSClassEffect CSSName="active" DisplayName="Remove CSS Class" MaxValue="0" MinValue="0" From="0" To="0" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).removeClass({1});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#button2" Duration="1000" Easing="linear" Callback="null"><Target.Effects><AddCSSClassEffect CSSName="active" DisplayName="Add CSS Class" MaxValue="0" MinValue="0" From="0" To="0" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).addClass({1});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /><TimerEffect CSSName="button3_click" DisplayName="Timer" MaxValue="10000" MinValue="1" From="0" To="3000" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="clearTimeout(timer);
 timer = setTimeout(eval({1}),{2});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="button3_click" EventType="click" Trigger="#button3"><Animation.Targets><Target Name=".slide" Duration="1000" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="ModifyCSS" MaxValue="5000" MinValue="-5000" From="0" To="hidden" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#image3" Duration="300" Easing="linear" Callback="null"><Target.Effects><ModifyCSSEffect CSSName="visibility" DisplayName="ModifyCSS" MaxValue="5000" MinValue="-5000" From="0" To="visible" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).css({1},{2});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /><OpacityEffect CSSName="opacity" DisplayName="Opacity Effect" MaxValue="1" MinValue="0" From="0" To="1" IsStartValue="True" IsActive="True" IsAnimatable="True" IsExpression="False" FormatString="" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="ul.buttons li" Duration="1000" Easing="linear" Callback="null"><Target.Effects><RemoveCSSClassEffect CSSName="active" DisplayName="Remove CSS Class" MaxValue="0" MinValue="0" From="0" To="0" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).removeClass({1});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target><Target Name="#button3" Duration="1000" Easing="linear" Callback="null"><Target.Effects><AddCSSClassEffect CSSName="active" DisplayName="Add CSS Class" MaxValue="0" MinValue="0" From="0" To="0" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="$({0}).addClass({1});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /><TimerEffect CSSName="button1_click" DisplayName="Timer" MaxValue="10000" MinValue="1" From="0" To="3000" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="clearTimeout(timer);
 timer = setTimeout(eval({1}),{2});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation><Animation Name="OnLoad" EventType="load" Trigger="{x:Null}"><Animation.Targets><Target Name="{x:Null}" Duration="1000" Easing="linear" Callback="null"><Target.Effects><TimerEffect CSSName="button2_click" DisplayName="Timer" MaxValue="10000" MinValue="1" From="0" To="3000" IsStartValue="False" IsActive="True" IsAnimatable="False" IsExpression="False" FormatString="clearTimeout(timer);
 timer = setTimeout(eval({1}),{2});
" RequiresJQueryPlugin="False" JQueryPluginURI="" /></Target.Effects></Target></Animation.Targets></Animation></AnimationCollection> jQuery(function($) { var timer; function button1_click(event) { $(".slide").css("visibility","hidden"); $("#image1").css("visibility","visible"); $("#image1").css("opacity","0"); $("#image1").animate({"opacity":1},300, "linear", null); $("ul.buttons li").removeClass("active"); $("#image1").animate({"opacity":1},300, "linear", null); $("#button1").addClass("active"); clearTimeout(timer); timer = setTimeout(eval("button2_click"),"3000"); $("#image1").animate({"opacity":1},300, "linear", null); } function button2_click(event) { $(".slide").css("visibility","hidden"); $("#image2").css("visibility","visible"); $("#image2").css("opacity","0"); $("#image2").animate({"opacity":1},300, "linear", null); $("ul.buttons li").removeClass("active"); $("#image2").animate({"opacity":1},300, "linear", null); $("#button2").addClass("active"); clearTimeout(timer); timer = setTimeout(eval("button3_click"),"3000"); $("#image2").animate({"opacity":1},300, "linear", null); } function button3_click(event) { $(".slide").css("visibility","hidden"); $("#image3").css("visibility","visible"); $("#image3").css("opacity","0"); $("#image3").animate({"opacity":1},300, "linear", null); $("ul.buttons li").removeClass("active"); $("#image3").animate({"opacity":1},300, "linear", null); $("#button3").addClass("active"); clearTimeout(timer); timer = setTimeout(eval("button1_click"),"3000"); $("#image3").animate({"opacity":1},300, "linear", null); } function button4_click(event) { $(".slide").css("visibility", "hidden"); $("#image4").css("visibility", "visible"); $("#image4").css("opacity", "0"); $("#image4").animate({ "opacity": 1 }, 300, "linear", null); $("ul.buttons li").removeClass("active"); $("#image4").animate({ "opacity": 1 }, 300, "linear", null); $("#button4").addClass("active"); clearTimeout(timer); timer = setTimeout(eval("button1_click"), "3000"); $("#image4").animate({ "opacity": 1 }, 300, "linear", null); } function OnLoad(event) { clearTimeout(timer); timer = setTimeout(eval("button2_click"),"3000"); } $('#button1').bind('click', button1_click); $('#button2').bind('click', button2_click); $('#button3').bind('click', button3_click); $('#button4').bind('click', button4_click); OnLoad(); });
View Code Html页面的布局
<div id="mainContainer"> <div id="Div1"> <div id="topSection"> <div class="slideshow"> <ul class="buttons"> <li class="active" id="button1"><a href="#" title="website named desire">1</a></li> <li id="button2"><a href="#" title="">2</a></li> <li id="button3"><a href="#" title="">3</a></li> <li id="button4"><a href="#" title="oomph">4</a></li> </ul> <asp:Repeater ID="ReHotelIndex" runat="server"> <HeaderTemplate> <ul class="slides"> </HeaderTemplate> <ItemTemplate> <li style="visibility: visible" class="slide" id="image<%#Container.ItemIndex+1 %>"> <img src="<%#Eval("Thumb") %>" style="margin-left: 10%; 970px; height: 350px" border="0"> </li> </ItemTemplate> <FooterTemplate> </ul> </FooterTemplate> </asp:Repeater> </div> </div> </div>
</div>
