| 标题 | 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; 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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。