足球游戏_中国足彩网¥体育资讯$

js、jquery图片动画、动态切换示例代码
来源:易贤网 阅读:1983 次 日期:2014-06-04 21:55:43
温馨提示:易贤网小编为您整理了“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>

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看网络编程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标