基于JQuery制作的产品广告效果


Posted in Javascript onDecember 08, 2010

效果图.如下:
基于JQuery制作的产品广告效果
动画效果介绍:这组广告效果是打开页面后图片会自动播放,从1-5共计5张图片,如果属标放到右下角的1、2、3、4、5列表上,可以自由进行切换到自己想看的图片上去。图片切换是由下到上变换的。
基于JQuery制作的产品广告效果
制作思路:先将这5张图片分别放入到ul的5个li列表中,
《1》求出图片个的总个数. 并当我们如果在单击1.2.3.4.5时就将它对应的数字传过去,就它显示对应的图片。
《2》如果属标放上,就停止动画(可以利用clearIntval() ),如果属标移到,我们可以利用 setIntval(函数,时间) 去每隔3000毫秒去执行一下这个函数一次。
《3》完成这个动画函数。在这个函数中首先我们可以得到这个动画区域(.slider)的高度。再利用animate自定义动画函数实现在TOP位置上变化。并且给当前li中的数字加上高亮效果。
《4》还有一点就是要使这里的TOP变化正常,一定要在当前区域的父标记(.ad)中设置"position:relative;" 一切就都已OK了。制作代码如下:

1》html结构如下:

<div class="ad" > 
<ul class="slider" > 
<li><img src="images/ads/1.gif"/></li> 
<li><img src="images/ads/2.gif"/></li> 
<li><img src="images/ads/3.gif"/></li> 
<li><img src="images/ads/4.gif"/></li> 
<li><img src="images/ads/5.gif"/></li> 
</ul> 
<ul class="num" > 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
</div>

2》jquery 代码如下:

//超链接文字提示 
$(function(){ 
var len = $(".num >li").length; 
var index = 0; 
var adTimer; $(".num li").mouseover(function(){ 
index = $(".num li").index(this); //这里的 " this " 可以换成 " $(this) " 
showImg(index); 
}).eq(0).mouseover(); //用来初如化,当打开页面时,做第一个图片为属标放上时去触发动画. 

//以<ad 图片>为对象, 属标滑入停止动画,属标滑出开始动画 
$(".ad").hover(function(){ 
clearInterval(adTimer); 
},function(){ 
adTimer = setInterval(function(){ 
showImg(index); 
index++; 
if( index == len ){ index=0; } 
} , 3000); 
}).trigger("mouseleave"); 
}) 
//通过给定的的索引 显示不同的图片 
function showImg(index){ 
var adHeight = $(".content_right .ad").height(); 
$(".slider").stop(true,false).animate( {"top": -adHeight*index},1000 ); 
$(".num li").removeClass("on") 
.eq(index).addClass("on"); 
}

3》对应的CSS样式:

.content_right{ 
background:#eee; 
border : 1px solid #AAAAAA; 
width: 586px; 
float:left; 
} 
.content_right .ad { 
margin-bottom:10px; 
width:586px; 
height:150px; 
overflow:hidden; 
position:relative; 
} 
.content_right .slider, 
.content_right .num { 
position:absolute; 
} 
.content_right .slider li{ 
list-style:none; 
display:inline; 
} 
.content_right .slider img{ 
width:586px; 
height:150px; 
display:block; 
} 
.content_right .num{ 
right:5px; 
bottom:5px; 
} 
.content_right .num li{ 
float: left; 
width: 16px; 
height: 16px; 
line-height: 16px; 
text-align: center; 
font-family: Arial; 
font-size: 12px; 
color: #FF7300; 
background-color: #fff; 
border: 1px solid #FF7300; 
overflow: hidden; 
margin: 3px 1px; 
cursor: pointer; 
} 
.content_right .num li.on{ 
width: 21px; 
height: 21px; 
line-height: 21px; 
color: #fff; 
background-color: #FF7300; 
font-size: 16px; 
margin: 0 1px; 
border: 0; 
font-weight: bold; 
}
Javascript 相关文章推荐
关于递归运算的顺序测试代码
Nov 30 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
JSON相关知识汇总
Jul 03 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
vue自定义一个v-model的实现代码
Jun 21 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
vue实现图片上传到后台
Jun 29 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 #Javascript
写js时遇到的一些小问题
Dec 06 #Javascript
javascript定义函数的方法
Dec 06 #Javascript
javascript中的一些注意事项 更新中
Dec 06 #Javascript
JavaScript Accessor实现说明
Dec 06 #Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 #Javascript
javascript处理table表格的代码
Dec 06 #Javascript
You might like
Search Engine Friendly的URL设计
2006/10/09 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python实现修改文件内容的方法分析
2018/03/25 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
酒店总经理助理职责
2014/02/12 职场文书
新任教师自我鉴定
2014/02/24 职场文书
家长对老师的感言
2014/03/11 职场文书
演讲主持词
2014/03/18 职场文书
药剂专业自荐书
2014/06/20 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
css弧边选项卡的项目实践
2023/05/07 HTML / CSS