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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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
php导入导出excel实例
2013/10/25 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
img的onload的另类用法
2008/01/10 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python实现简单flappy bird
2018/12/24 Python
python 两种方法删除空文件夹
2020/09/29 Python
Python通过format函数格式化显示值
2020/10/17 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
你懂得怎么写自荐信吗?
2013/12/27 职场文书
幼儿教育感言
2014/02/05 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
征婚广告词
2014/03/17 职场文书
建材投资建议书
2014/05/16 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
社区宣传标语口号
2015/12/26 职场文书