基于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 相关文章推荐
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
validator验证控件使用代码
Nov 23 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
关于用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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php中Ctype函数用法详解
2014/12/09 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
python定时器使用示例分享
2014/02/16 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
pandas分区间,算频率的实例
2019/07/04 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Python通过文本和图片生成词云图
2020/05/21 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
python实现三种随机请求头方式
2021/01/05 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
一道Delphi面试题
2016/10/28 面试题
会计自我鉴定
2014/02/04 职场文书
中学生英语演讲稿
2014/04/26 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA