banner的实现

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\tribe2\glimmer\Glimmer\glimmerUI\glimmerUI\samples\js\banner.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});&#xD;&#xA;" 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});&#xD;&#xA;" 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});&#xD;&#xA;" 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});&#xD;&#xA;" 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);&#xD;&#xA;     timer = setTimeout(eval({1}),{2});&#xD;&#xA;" 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});&#xD;&#xA;" 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});&#xD;&#xA;" 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});&#xD;&#xA;" 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});&#xD;&#xA;" 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);&#xD;&#xA;     timer = setTimeout(eval({1}),{2});&#xD;&#xA;" 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});&#xD;&#xA;" 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});&#xD;&#xA;" 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});&#xD;&#xA;" 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});&#xD;&#xA;" 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);&#xD;&#xA;     timer = setTimeout(eval({1}),{2});&#xD;&#xA;" 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);&#xD;&#xA;     timer = setTimeout(eval({1}),{2});&#xD;&#xA;" 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();

});

 <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%; width: 970px; height: 350px" border="0">
                                </li>
                            </ItemTemplate>
                            <FooterTemplate>
                                </ul>
                            </FooterTemplate>
                        </asp:Repeater>

                    </div>
                </div>
            </div>

        </div>