這篇文章主要介紹了通過js、jquery實現(xiàn)的圖片動畫、圖片動態(tài)切換,需要的朋友可以參考下。

代碼如下:

<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元素內(nèi)的值，即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>

<!--標(biāo)題背景-->

<divid="banner_info">

</div>

<!--標(biāo)題-->

<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技術(shù)專欄