效果图片jquery 图片幻灯轮换效果

PS:今天上午，非常郁闷，有很多简单基础的问题搞得我有些迷茫，哎，代码几天不写就忘。目前又不当COO，还是得用心记代码哦！

    

    jquery 图片幻灯轮换效果

    

< div  class ="fleft main-con"  id ="focus" >
             < div  id ="banner_bg" ></ div >
             < div  id ="banner_info" ></ div >
             < ul >
                 < li  class ="on" >1 </ li >
                 < li >2 </ li >
                 < li >3 </ li >
                 < li >4 </ li >
                 < li >5 </ li >
             </ ul >
             < div  id ="banner_list" >
                 < a  href ="javascript:void(0);" >< img  src ="UpFile/201301/1.jpg"  alt =""  width ="485"  height ="232"   /></ a >
                 < a  href ="javascript:void(0);" >< img  src ="UpFile/201301/2.jpg"  alt =""  width ="485"  height ="232"   /></ a >
                 < a  href ="javascript:void(0);" >< img  src ="UpFile/201301/3.jpg"  alt =""  width ="485"  height ="232"   /></ a >
                 < a  href ="javascript:void(0);" >< img  src ="UpFile/201301/4.jpg"  alt =""  width ="485"  height ="232"   /></ a >
                 < a  href ="javascript:void(0);" >< img  src ="UpFile/201301/5.jpg"  alt =""  width ="485"  height ="232"   /></ a >
                 < a  href ="javascript:void(0);" >< img  src ="UpFile/201301/6.jpg"  alt =""  width ="485"  height ="232"   /></ a >
             </ div >
         </ div >

    每日一道理
即使青春是一枝娇艳的花，但我明白，一枝独放永远不是春天，春天该是万紫千红的世界。 即使青春是一株大地伟岸的树，但我明白，一株独秀永远不是挺拔，成行成排的林木，才是遮风挡沙的绿色长城。即使青春是一叶大海孤高的帆，但我明白，一叶孤帆很难远航，千帆竞发才是大海的壮观。

    

View Code

#focus { position: relative;  width: 484px;  height: 232px;  border: 1px solid #666;  overflow: hidden;}
#banner_list img { border: 0px;}
#banner_bg { position: absolute;  bottom: 0; background-color: #000; height: 30px; filter:  Alpha(Opacity=30); opacity: 0.3; z-index: 1000; cursor: pointer;  width: 478px;}
#banner_info{ position: absolute;  bottom: 0;  left: 5px; height: 22px; color: #fff; z-index: 1001; cursor: pointer;}
#banner_text { position: absolute; width: 120px; z-index: 1002;  right: 3px;  bottom: 3px;}
#focus ul { position: absolute; list-style-type: none; filter:  Alpha(Opacity=80); opacity: 0.8;  border: 1px solid #fff; z-index: 1002;  margin: 0;  padding: 0;  bottom: 3px;  right: 5px;}
#focus ul li {  padding: 0px 8px; float: left; display: block; color: #FFF; border: #e5eaff 1px solid; background: #6f4f67; cursor: pointer}
#focus ul li.on {  background: #900;}
#banner_list a{ position: absolute;}

    

count=$("#banner_list a").length;
    $("#banner_list a:not(:first-child)").hide();
    $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
    $("#banner_info").click( function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
    $("#focus li").click( function() {
         var i = $( this).text() - 1;
        n = i;
         if (i >= count)  return;
        $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
        $("#banner_info").unbind().click( function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
        $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
        document.getElementById("focus").style.background="";
        $( this).toggleClass("on");
        $( this).siblings().removeAttr("class");
    });
    t = setInterval("showAuto()", 4000);
    $("#focus").hover( function(){clearInterval(t)},  function(){t = setInterval("showAuto()", 4000);});

    

文章结束给大家分享下程序员的一些笑话语录： 这年头的互联网真是娱乐了中国，网民们从各种各样的“门”里钻来钻去，又有好多“哥”好多“帝”，值得大家品味不已……网络经典语录，关于IT与互联网，经典与您分享！