基于JQuery制作的产品广告效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了基于JQuery制作的产品广告效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2863字，纯文字阅读大概需要5分钟。
内容图文
效果图.如下： 
动画效果介绍：这组广告效果是打开页面后图片会自动播放，从1-5共计5张图片，如果属标放到右下角的1、2、3、4、5列表上，可以自由进行切换到自己想看的图片上去。图片切换是由下到上变换的。
制作思路：先将这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;
}
内容总结
以上是互联网集市为您收集整理的基于JQuery制作的产品广告效果全部内容，希望文章能够帮你解决基于JQuery制作的产品广告效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】