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


Posted in Javascript onJune 03, 2014
<style type="text/css"> 
#banner 
{ 
padding: 5px; 
position: relative; 
width: 968px; 
height: 293px; /*border: 1px solid #666;*/ 
overflow: hidden; 
font-size: 16px; 
} 
#banner_list img 
{ 
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; 
} 
#banner ul 
{ 
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; 
} 
#banner ul li 
{ 
padding: 0 8px; 
line-height: 18px; 
float: left; 
display: block; 
color: #FFF; 
border: #e5eaff 1px solid; 
background-color: #6f4f67; 
cursor: pointer; 
margin: 0; 
font-size: 16px; 
} 
#banner_list a 
{ 
/* position: absolute;*/ 
width: 968px; 
height: 293px; 
margin: 0px; 
padding: 0px; 
} 
#banner_list 
{ 
margin: 0px; 
padding: 0px; 
width: 968px; 
height: 293px; 
border: #e7e7e7 1px solid; 
} 
</style>

<script type="text/javascript"> 
var t = n = 0, count; 
$(function () { 
count = $("#banner_list a").length; 
$("#banner_list a:not(:first-child)").hide(); 
$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt')); 
$("#banner_info").click(function () { window.open($("#banner_list a:first-child").attr('href'), "_blank") }); 
$("#banner li").click(function () { 
var i = $(this).text() - 1; //获取Li元素内的值,即1,2,3,4 
n = i; 
if (i >= count) return; 
$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); 
$("#banner_info").unbind().click(function () { window.open($("#banner_list a").eq(i).attr('href'), "_blank") }) 
$("#banner_list a").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秒钟切换一张图片}); 
function showAuto() { 
n = n >= (count - 1) ? 0 : ++n; 
$("#banner li").eq(n).trigger('click'); 
} 
</script>

<div id="banner"> 
<div id="banner_bg"> 
</div> 
<!--标题背景--> 
<div id="banner_info"> 
</div> 
<!--标题--> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
<div id="banner_list"> 
<a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgoneURL"]:""%>' target="_blank"> 
<img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgone"]:"Images/Singapore.jpg"%>' 
title="" alt="" width="968px" height="293px" border="0" /></a> <a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgtowURL"]:""%>' 
target="_blank"> 
<img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgtow"]:"Images/Malaysia.jpg"%>' 
title="" alt="" width="968px" height="293px" border="0" /></a> <a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgthreeURL"]:""%>' 
target="_blank"> 
<img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgthree"]:"Images/HongKong.jpg"%>' 
title="" alt="" width="968px" height="293px" border="0" /></a> 
<a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgfourURL"]:""%>' target="_blank"> 
<img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgfour"]:"Images/flash4.jpg"%>' 
title="" alt="" width="968px" height="293px" border="0" /></a> 
</div> 
</div>
Javascript 相关文章推荐
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
div模拟选择框示例代码
Nov 03 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
JQuery基础语法小结
Feb 27 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
Node.js笔记之process模块解读
May 31 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 #Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 #Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 #Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 #Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 #Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 #Javascript
node.js实现多图片上传实例
Jun 03 #Javascript
You might like
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
JS实现的省份级联实例代码
2013/06/24 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
javascript的内存管理详解
2013/08/07 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python输出9*9乘法表的方法
2015/05/25 Python
Python字符串切片操作知识详解
2016/03/28 Python
简单谈谈Python流程控制语句
2016/12/04 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
python列表生成器迭代器实例解析
2019/12/19 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
副总经理工作职责
2013/11/28 职场文书
建议书格式
2015/02/04 职场文书
期中考试后的感想
2015/08/07 职场文书
《给予树》教学反思
2016/03/03 职场文书