基于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 相关文章推荐
实现JavaScript中继承的三种方式
Oct 16 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
Nuxt页面级缓存的实现
Mar 09 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
写出高质量的PHP程序
2012/02/04 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
python读取注册表中值的方法
2013/04/08 Python
在Python中使用模块的教程
2015/04/27 Python
python可视化实现代码
2019/01/15 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
python 绘制正态曲线的示例
2020/09/24 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
七一表彰活动方案
2014/01/18 职场文书
电子商务求职信
2014/06/15 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
党员自我剖析材料
2014/08/31 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python
Python实现聚类K-means算法详解
2022/07/15 Python