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 相关文章推荐
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
浅谈javascript回调函数
Dec 07 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
详解webpack 多入口配置
Jun 16 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 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数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
带你了解python装饰器
2017/06/15 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
GWT都有什么特性
2016/12/02 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
党员干部承诺书
2014/03/25 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
公司演讲稿开场白
2014/08/25 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
药店采购员岗位职责
2014/09/30 职场文书
婚育证明样本
2015/06/16 职场文书
商业计划书范文
2019/04/24 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python