基于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 相关文章推荐
图片完美缩放
Sep 07 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php include,include_once,require,require_once
2008/09/05 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
javascript实现tab切换的四种方法
2015/11/05 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python如何为创建大量实例节省内存
2018/03/20 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
时尚圣经:The Fashion Bible
2019/03/03 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
给护士表扬信
2014/01/19 职场文书
转让协议书范本
2014/04/15 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
民事辩护词范文
2015/05/21 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers
python热力图实现的完整实例
2022/06/25 Python