Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 基于JQuery制作的产品广告效果

基于JQuery制作的产品广告效果

发布时间:2013-07-22   编辑:www.jquerycn.cn
这个漂亮的产品广告效果,在购物网站也是比较常见的,或是迅雷视频网站上。
这个漂亮的产品广告效果,在购物网站也是比较常见的,或是迅雷视频网站上。 效果图.如下:

动画效果介绍:这组广告效果是打开页面后图片会自动播放,从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产品展示控件 jqueryBook
电商网站怎么规划好网站内部链接详解
hover的用法及live的用法介绍(鼠标悬停效果)
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
jQuery幻灯片插件 SlidesJS
jQuery实战之仿淘宝商城左侧导航效果
jQuery图片展示插件 Easy Slide
基于jQuery的合并表格中相同文本的相邻单元格的代码
12款经典的白富美型—jquery图片轮播插件—前端开发必备

[关闭]