js、jquery图片动画、动态切换示例代码_

1、js、jquery图片动画、动态切换示例代码_ 这篇文章主要介绍了通过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; bot

2、tom: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:3

3、px; 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-colo

4、r:#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()

5、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元素内的值，

6、即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(backgrou

7、nd:#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=b

8、anner divid=banner_bg /div !-标题背景- divid=banner_info /div !-标题- ul li1/li li2/li li3/li li4/li /ul divid=banner_list ahref=%:DicFlashImg!=null?DicFlashImgPFI_FlashImgoneURL:%target=_blank imgsrc=%:DicFlashImg!=null?DicFlashImgPFI_FlashImgone:Images/Singapore.jpg% title=alt=width=968pxheight=293pxbor

9、der=0/aahref=%:DicFlashImg!=null?DicFlashImgPFI_FlashImgtowURL:% target=_blank imgsrc=%:DicFlashImg!=null?DicFlashImgPFI_FlashImgtow:Images/Malaysia.jpg% title=alt=width=968pxheight=293pxborder=0/aahref=%:DicFlashImg!=null?DicFlashImgPFI_FlashImgthreeURL:% target=_blank imgsrc=%:DicFlashImg!=null?DicFlashImgPFI_FlashImgthree:Images/HongKong.jpg% title=alt=width=968pxheight=293pxborder=0/a ahref=%:DicFlashImg!=null?DicFlashImgPFI_FlashImgfourURL:%target=