js、jquery图片动画、动态切换示例代码
<styletype="text/css">
#banner
{
padding:5px;
position:relative;
width:968px;
height:293px;/*border:1pxsolid#666;*/
overflow:hidden;
font-size:16px;
}
#banner_listimg
{
border:0px;
}
#banner_bg
{
margin-bottom:5px;
position:absolute;
bottom:0;
background-color:#000;
height:30px;
filter:Alpha(Opacity=30);
opacity:0.3;
z-index:1000;
cursor:pointer;
width:968px;
}
#banner_info
{
position:absolute;
bottom:4px;
left:0px;
height:22px;
color:#fff;
z-index:1001;
cursor:pointer;
}
#banner_text
{
position:absolute;
width:120px;
z-index:1002;
right:3px;
bottom:3px;
}
#bannerul
{
position:absolute;
list-style-type:none;
filter:Alpha(Opacity=80);
opacity:0.8;
z-index:1002;
margin:0;
padding:0;
bottom:10px;
right:5px;
height:20px;
}
#bannerulli
{
padding:08px;
line-height:18px;
float:left;
display:block;
color:#FFF;
border:#e5eaff1pxsolid;
background-color:#6f4f67;
cursor:pointer;
margin:0;
font-size:16px;
}
#banner_lista
{
/*position:absolute;*/
width:968px;
height:293px;
margin:0px;
padding:0px;
}
#banner_list
{
margin:0px;
padding:0px;
width:968px;
height:293px;
border:#e7e7e71pxsolid;
}
</style>
<scripttype="text/javascript">
vart=n=0,count;
$(function(){
count=$("#banner_lista").length;
$("#banner_lista:not(:first-child)").hide();
$("#banner_info").html($("#banner_lista:first-child").find("img").attr('alt'));
$("#banner_info").click(function(){window.open($("#banner_lista:first-child").attr('href'),"_blank")});
$("#bannerli").click(function(){
vari=$(this).text()-1;//获取Li元素内的值，即1，2，3，4
n=i;
if(i>=count)return;
$("#banner_info").html($("#banner_lista").eq(i).find("img").attr('alt'));
$("#banner_info").unbind().click(function(){window.open($("#banner_lista").eq(i).attr('href'),"_blank")})
$("#banner_lista").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
$(this).css({"background":"#be2424",'color':'#000'}).siblings().css({"background":"#6f4f67",'color':'#fff'});
});
t=setInterval("showAuto()",4000);
$("#banner").hover(function(){clearInterval(t)},function(){t=setInterval("showAuto()",4000);});//4秒钟切换一张图片});
functionshowAuto(){
n=n>=(count-1)?0:++n;
$("#bannerli").eq(n).trigger('click');
}
</script>
<divid="banner"> <divid="banner_bg"> </div> <!--标题背景--> <divid="banner_info"> </div> <!--标题--> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <divid="banner_list"> <ahref='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgoneURL"]:""%>'target="_blank"> <imgsrc='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgone"]:"Images/Singapore.jpg"%>' title=""alt=""width="968px"height="293px"border="0"/></a><ahref='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgtowURL"]:""%>' target="_blank"> <imgsrc='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgtow"]:"Images/Malaysia.jpg"%>' title=""alt=""width="968px"height="293px"border="0"/></a><ahref='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgthreeURL"]:""%>' target="_blank"> <imgsrc='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgthree"]:"Images/HongKong.jpg"%>' title=""alt=""width="968px"height="293px"border="0"/></a> <ahref='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgfourURL"]:""%>'target="_blank"> <imgsrc='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgfour"]:"Images/flash4.jpg"%>' title=""alt=""width="968px"height="293px"border="0"/></a> </div> </div>
热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短