基于JQuery制作的产品广告效果
时间：2021-01-27 10:40:35|栏目：jquery|点击： 次
效果图.如下：
动画效果介绍：这组广告效果是打开页面后图片会自动播放，从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;
}
动画效果介绍：这组广告效果是打开页面后图片会自动播放，从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的图片懒加载js
栏 目：jquery
下一篇：jQuery搜索同辈元素方法
本文标题：基于JQuery制作的产品广告效果
本文地址：http://www.codeinn.net/misctech/52145.html
