这篇文章主要介绍了通过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>
更多信息请查看IT技术专栏