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 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
vue实现微信分享功能
Nov 28 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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 Smarty 字符比较代码
2011/02/27 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
filemanage功能中用到的lib.js
2007/04/08 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python中常用的九种预处理方法分享
2016/09/11 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
ipad上运行python的方法步骤
2019/10/12 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
Python绘制动态水球图过程详解
2020/06/03 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
大学生旅游业创业计划书
2014/01/29 职场文书
生态养殖创业计划书
2014/05/06 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis