jquery 图片幻灯轮换效果

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);});

转载于:https://www.cnblogs.com/chendaoyin/archive/2013/04/03/2998450.html