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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
vue实现简单图片上传
Jun 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
php中iconv函数使用方法
2008/05/24 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
JS验证不重复验证码
2017/02/10 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
Python中统计函数运行耗时的方法
2015/05/05 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
python中import reload __import__的区别详解
2017/10/16 Python
python3实现高效的端口扫描
2019/08/31 Python
如何在django中实现分页功能
2020/04/22 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
运动会主持人开幕词
2016/03/04 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
DIY胆机必读:各国电子管评价
2022/04/06 无线电
vue选项卡切换的实现案例
2022/04/11 Vue.js
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python