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 14 Javascript
javascript里使用php代码实例
Dec 13 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 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
优化使用mysql存储session的php代码
2008/01/10 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
利用json获取字符出现次数的代码
2012/03/22 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
Angular2安装angular-cli
2017/05/21 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
Python之PyUnit单元测试实例
2014/10/11 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python多层装饰器用法实例分析
2018/02/09 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
学生违反校规检讨书
2014/10/28 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技