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 >
< 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 >
![效果和图片](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![效果和图片](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
#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;}
#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);});
$("#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与互联网,经典与您分享!