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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
javascript dom 操作详解 js加强
Jul 13 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
分类解析jQuery选择器
Nov 23 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
JS实现百度搜索框关键字推荐
Feb 17 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
Zend Guard一些常见问题解答
2008/09/11 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
php语法检查的方法总结
2019/01/21 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
python实现扫描日志关键字的示例
2018/04/28 Python
python 构造三维全零数组的方法
2018/11/12 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
电大学习个人自我评价范文
2013/10/04 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
公司薪酬管理制度
2014/01/31 职场文书
学校后勤岗位职责
2014/02/19 职场文书
医院合作意向书范本
2015/05/08 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
Python基础之进程详解
2021/05/21 Python