jQuery实现企业网站横幅焦点图切换功能实例


Posted in Javascript onApril 30, 2015

本文实例讲述了jQuery实现企业网站横幅焦点图切换功能的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery淡出淡入带缩略图幻灯片</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
.flashBanner{width:782px;height:326px;
overflow:hidden;margin:0 auto;
}
.flashBanner{position:relative;}
.flashBanner .mask{height:32px;line-height:32px;
background-color:#000;width:100%;
text-align:right;position:absolute;left:0;
bottom:-32px;filter:alpha(opacity=70);
-moz-opacity:0.7;opacity:0.7;overflow:hidden;
}
.flashBanner .mask img{
vertical-align:middle;
margin-right:10px;
cursor:pointer;
}
.flashBanner .mask img.show{margin-bottom:3px;}
</style>
<script type="text/javascript">
$(function(){
$(".flashBanner").each(function(){
var timer;
$(".flashBanner .mask img").click(function(){
var index = $(".flashBanner .mask img").index($(this));

changeImg(index);
}).eq(0).click();
$(this).find(".mask").animate({
"bottom":"0" 
},700);
$(".flashBanner").hover(function(){
clearInterval(timer);

},function(){
timer = setInterval(function(){
var show = $(".flashBanner .mask img.show").index();
if (show >= $(".flashBanner .mask img").length-1)
show = 0;
else
show ++;
changeImg(show);
},3000);
});
function changeImg (index)
{
$(".flashBanner .mask img").removeClass("show").eq(index).addClass("show");
$(".flashBanner .bigImg").parents("a").attr("href",$(".flashBanner .mask img").eq(index).attr("link"));
$(".flashBanner .bigImg").hide().attr("src",$(".flashBanner .mask img").eq(index).attr("uri")).fadeIn("slow");
}
timer = setInterval(function(){
var show = $(".flashBanner .mask img.show").index();
if (show >= $(".flashBanner .mask img").length-1)
show = 0;
else
show ++;
changeImg(show);
},3000);
});
});
</script>
</head>
<body>
<div class="flashBanner">
<a href="/"><img class="bigImg" width="782" height="326" /></a>
<div class="mask">
<img src="11.jpg" uri="11.jpg" link="/" width="60" height="22"/>
<img src="22.jpg" uri="22.jpg" link="/" width="60" height="22"/>
<img src="33.jpg" uri="33.jpg" link="/" width="60" height="22"/>
<img src="44.jpg" uri="44.jpg" link="/" width="60" height="22"/>
<img src="55.jpg" uri="55.jpg" link="/" width="60" height="22"/>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 #Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 #Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 #Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 #Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 #Javascript
jQuery层动画定位滑动效果的方法
Apr 30 #Javascript
jquery中$each()方法的使用指南
Apr 30 #Javascript
You might like
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
Javascript 获取LI里的内容
2008/12/17 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
JS中递归函数
2016/06/17 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
利用python获得时间的实例说明
2013/03/25 Python
python写日志封装类实例
2015/06/28 Python
django模板语法学习之include示例详解
2017/12/17 Python
python模块之paramiko实例代码
2018/01/31 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
关于运动会的口号
2014/06/07 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android